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 rounded border to any element. It uses CSS border-image with a 9-slice composite image to ensure crisp rendering on 1-bit displays while maintaining responsiveness across different element sizes.
Applying an Outline
Add the outline class to any element
to give it a pixel-perfect rounded border.
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 CSS border-image with a 9-slice composite image. This technique allows the corners to remain pixel-perfect while the edges repeat to fill any size container.
9-Slice Border Image
The border image is divided into 9 regions: four corners that stay fixed, four edges that repeat to fill the space, and a center region. This approach ensures the rounded corners render consistently regardless of element dimensions.
/* How the CSS works internally */
.outline {
border: 10px solid transparent;
border-image-source: url("/images/borders--1bit/outline.png");
border-image-slice: 10 fill;
border-image-repeat: repeat;
}Bit-Depth Behavior
The outline utility adapts to different display bit-depths automatically. On 1-bit displays, it uses the border-image technique 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 border-image with a dithered 9-slice image for crisp, pixel-perfect corners.
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: Uses border-image */
.outline {
border-image-source: url("/images/borders--1bit/outline.png");
/* ... */
}
/* 2-bit and 4-bit: Falls back to CSS border */
.screen--2bit .outline,
.screen--4bit .outline {
border-image: none;
border: 1px solid var(--black);
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.
<!-- 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>