Outline

The Outline utility draws a pixel-perfect dotted rounded border on any element. On 1-bit displays it places single-pixel dots at exact integer coordinates with pure CSS gradients; on 2-bit and 4-bit displays it falls back to a standard CSS border 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 56 CSS background layers to place each dot at an exact integer pixel coordinate. Four edge layers use repeating-linear-gradient for a 1px dot every 4px, and 16 corner layers use individual linear-gradient blocks sized to 1x1px and positioned with pixel-precise offsets. The remaining 36 layers are corner fill-ins that stay transparent until a device with a dither pixel ratio of 2 or more turns them on.

dither-pixel-ratio is a separate profile field from pixel-ratio. TRMNL V2 previews at pixel ratio 1.8 and still renders its art at double density, so it gets the fill-ins.

#

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 dot color resolves in three steps: --framework-semantic-border-strong-border-color, then --framework-outline-strong, then --framework-border-strong. A theme repoints the first step through theme-slots.semantic-border, so dark mode and themes recolor the outline 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 ... */
        /* ... 36 high-DPI corner fill-ins ... */
}
#

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 because --framework-semantic-border-strong-border-color flips to white.

#

2-bit and 4-bit Displays

Falls back to a standard 1px solid border for smoother rendering that takes advantage of the additional grayscale capabilities. The corner radius is 7px, scaled by the content scale. 

/* 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-semantic-border-strong-border-color,
        var(--framework-outline-strong, var(--framework-border-strong)));
    border-radius: calc(7px * var(--content-scale, 1));
}
#

Related Tokens

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

Token 1-bit 2-bit Density 2x 4-bit and up
--rounded-full 9999px - - -
--rounded-large 20px - - -
--rounded-medium 15px - - -
--rounded-none 0px - - -
--rounded-small 7px - - -
--rounded-xlarge 25px - - -
--rounded-xsmall 5px - - -
--rounded-xxlarge 30px - - -