Border
The Border system creates the illusion of grayscale borders through carefully designed dither patterns. When rendered on 1-bit displays, these patterns create varying border intensities using alternating black and white pixels.
Usage
Apply borders using border--h-{n} for horizontal borders
and border--v-{n} for vertical borders,
where n ranges from 1 (lightest) to 7 (darkest).
Horizontal Borders
1
2
3
4
5
6
7
Horizontal Borders
<div class="border--h-1">Horizontal Border 1</div>
<div class="border--h-2">Horizontal Border 2</div>
<div class="border--h-3">Horizontal Border 3</div>
<div class="border--h-4">Horizontal Border 4</div>
<div class="border--h-5">Horizontal Border 5</div>
<div class="border--h-6">Horizontal Border 6</div>
<div class="border--h-7">Horizontal Border 7</div>Vertical Borders
1
2
3
4
5
6
7
Vertical Borders
<div class="border--v-1">Vertical Border 1</div>
<div class="border--v-2">Vertical Border 2</div>
<div class="border--v-3">Vertical Border 3</div>
<div class="border--v-4">Vertical Border 4</div>
<div class="border--v-5">Vertical Border 5</div>
<div class="border--v-6">Vertical Border 6</div>
<div class="border--v-7">Vertical Border 7</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 | — | — |