Outline

The Outline utility provides pixel-perfect rounded borders using CSS border-image with a 9-slice composite image. On 1-bit displays, it renders crisp, dithered corner patterns that scale with the element. On 2-bit and 4-bit displays, it falls back to standard CSS borders with border-radius.

Basic Usage

The outline utility applies a pixel-perfect dotted rounded border to any element. On 1-bit displays, it uses pure CSS gradients to place single-pixel dots at exact integer coordinates along a rounded rectangle path. On 2-bit and 4-bit displays, it falls back to a standard CSS border with border-radius.

Applying an Outline

Add the outline class to any element to give it a pixel-perfect rounded border.

With outline
Without outline
TRMNL Logo Outline Utility Design System 
<!-- Add outline to any element -->
<div class="outline">
  Content with pixel-perfect rounded border
</div>

How It Works

The outline utility uses 20 CSS background layers to place each dot at an exact integer pixel coordinate. Edge dots use repeating-linear-gradient for a 1px dot every 4px. Corner dots use individual linear-gradient blocks sized to 1x1px and positioned with pixel-precise offsets.

CSS Gradient Dots

No images are used. Each dot is computed mathematically by the CSS engine, guaranteeing pixel-grid alignment at any element size. The border color comes from --framework-border-strong, so dark mode works automatically without separate assets. 

/* How the CSS works internally (simplified) */
.outline::after {
    background:
        /* Edges: repeating 1px dot every 4px */
        repeating-linear-gradient(to right, black 0 1px, transparent 1px 4px)
            12px 0 / calc(100% - 24px) 1px no-repeat,
        /* ... 3 more edges ... */
        /* Corners: individual 1x1px dots */
        linear-gradient(black, black) 8px 0 / 1px 1px no-repeat,
        linear-gradient(black, black) 4px 1px / 1px 1px no-repeat,
        /* ... 14 more corner dots ... */
}

Bit-Depth Behavior

The outline utility adapts to different display bit-depths automatically. On 1-bit displays, it uses CSS gradient dots for pixel-perfect rendering. On 2-bit and 4-bit displays, it falls back to standard CSS borders with border-radius for smoother rendering.

1-bit Displays

Uses pure CSS gradients to place sparse single-pixel dots at exact integer coordinates. Dark mode works automatically via --framework-border-strong which inverts to white.

2-bit and 4-bit Displays

Falls back to a standard 1px solid border with 10px border-radius for smoother rendering that takes advantage of the additional grayscale capabilities. 

/* 1-bit: CSS gradient dots (via outline-dots mixin) */
.outline::after {
    @include outline-dots;
}

/* 2-bit and 4-bit: Falls back to CSS border */
.screen--2bit .outline::after,
.screen--4bit .outline::after {
    background: none;
    border: 1px solid var(--framework-border-strong);
    border-radius: 10px;
}

Screen Backdrop Modifier

For mashup layouts, the screen--backdrop modifier provides an alternative appearance where views sit on a patterned background instead of having outlined borders.

Default vs Backdrop Mashups

By default, mashups use a white background with bordered views for a clean, separated look. The screen--backdrop modifier changes this to a patterned background (1-bit) or solid gray background (2-bit/4-bit) with plain white views on top.

Plugin A
Plugin B 
<!-- Default mashup (white background, bordered views) -->
<div class="screen">
  <div class="mashup mashup--1Lx1R">
    <div class="view view--half_vertical">...</div>
    <div class="view view--half_vertical">...</div>
  </div>
</div>

<!-- Backdrop mashup (patterned background) -->
<div class="screen screen--backdrop">
  <div class="mashup mashup--1Lx1R">
    <div class="view view--half_vertical">...</div>
    <div class="view view--half_vertical">...</div>
  </div>
</div>

Related Tokens

These tokens are automatically mapped to this page by token prefix.

Token 1-bit 2-bit 4/8/16-bit
--rounded-full 9999px — —
--rounded-large 20px — —
--rounded-medium 15px — —
--rounded-none 0px — —
--rounded-small 7px — —
--rounded-xlarge 25px — —
--rounded-xsmall 5px — —
--rounded-xxlarge 30px — —