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 b-h-gray-{n} for horizontal borders
and b-v-gray-{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="b-h-gray-1">Horizontal Border 1</div>
<div class="b-h-gray-2">Horizontal Border 2</div>
<div class="b-h-gray-3">Horizontal Border 3</div>
<div class="b-h-gray-4">Horizontal Border 4</div>
<div class="b-h-gray-5">Horizontal Border 5</div>
<div class="b-h-gray-6">Horizontal Border 6</div>
<div class="b-h-gray-7">Horizontal Border 7</div>Vertical Borders
1
2
3
4
5
6
7
Vertical Borders
<div class="b-v-gray-1">Vertical Border 1</div>
<div class="b-v-gray-2">Vertical Border 2</div>
<div class="b-v-gray-3">Vertical Border 3</div>
<div class="b-v-gray-4">Vertical Border 4</div>
<div class="b-v-gray-5">Vertical Border 5</div>
<div class="b-v-gray-6">Vertical Border 6</div>
<div class="b-v-gray-7">Vertical Border 7</div>