Border

Syntax

Class
Properties
b-{width}-{...color}
border: {width} solid {color};
bx-{width}-{...color}
border-left: {width} solid {color};
border-right: {width} solid {color};
by-{width}-{...color}
border-top: {width} solid {color};
border-bottom: {width} solid {color};
bt-{width}-{...color}
border-top: {width} solid {color};
br-{width}-{...color}
border-right: {width} solid {color};
bb-{width}-{...color}
border-bottom: {width} solid {color};
bl-{width}-{...color}
border-left: {width} solid {color};
b-{width}-{style}-{...color}
border: {width} {style} {color};
bx-{width}-{style}-{...color}
border-left: {width} {style} {color};
border-right: {width} {style} {color};
by-{width}-{style}-{...color}
border-top: {width} {style} {color};
border-bottom: {width} {style} {color};
bt-{width}-{style}-{...color}
border-top: {width} {style} {color};
br-{width}-{style}-{...color}
border-right: {width} {style} {color};
bb-{width}-{style}-{...color}
border-bottom: {width} {style} {color};
bl-{width}-{style}-{...color}
border-left: {width} {style} {color};

Parameters

width
<length unsigned default-unit=1px>
style
solid | dashed | dotted | double | none
...color
<...color>

Border colors in various formats

<div class="t1 w-96 h-96 bg-c-white b-4-blue"></div>

Borders on specific sides

<div class="t1 w-96 h-96 bg-c-white b-4-blue"></div>

Border styles

<div class="t1 w-96 h-96 bg-c-white b-4-solid-blue"></div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
1px black border in default solid style.
t1 b-1-black
.t1.b-1-black { border: 1px solid #000000; }
1px solid black border.
t1 b-1-dashed-black
.t1.b-1-dashed-black { border: 1px dashed #000000; }
1px black left and right border in default solid style.
t1 bx-1-black
.t1.bx-1-black { border-left: 1px solid #000000; border-right: 1px solid #000000; }
1px dashed black left and right border.
t1 bx-1-dashed-black
.t1.bx-1-dashed-black { border-left: 1px dashed #000000; border-right: 1px dashed #000000; }
1px black top and bottom border in default solid style.
t1 by-1-black
.t1.by-1-black { border-top: 1px solid #000000; border-bottom: 1px solid #000000; }
1px dashed black top and bottom border.
t1 by-1-dashed-black
.t1.by-1-dashed-black { border-top: 1px dashed #000000; border-bottom: 1px dashed #000000; }
1px black top border in default solid style.
t1 bt-1-black
.t1.bt-1-black { border-top: 1px solid #000000; }
1px solid black top border.
t1 bt-1-dashed-black
.t1.bt-1-dashed-black { border-top: 1px dashed #000000; }
1px black right border in default solid style.
t1 br-1-black
.t1.br-1-black { border-right: 1px solid #000000; }
1px solid black right border.
t1 br-1-dashed-black
.t1.br-1-dashed-black { border-right: 1px dashed #000000; }
1px black bottom border in default solid style.
t1 bb-1-black
.t1.bb-1-black { border-bottom: 1px solid #000000; }
1px solid black bottom border.
t1 bb-1-dashed-black
.t1.bb-1-dashed-black { border-bottom: 1px dashed #000000; }
1px black left border in default solid style.
t1 bl-1-black
.t1.bl-1-black { border-left: 1px solid #000000; }
1px solid black left border.
t1 bl-1-dashed-black
.t1.bl-1-dashed-black { border-left: 1px dashed #000000; }
Definition order. `bl` shall override `bx` which in turn shall override the most generic `b`.
t1 b-1-black bx-1-black by-1-black bt-1-black bl-1-black bb-1-black br-1-black
.t1.b-1-black { border: 1px solid #000000; } .t1.bx-1-black { border-left: 1px solid #000000; border-right: 1px solid #000000; } .t1.by-1-black { border-top: 1px solid #000000; border-bottom: 1px solid #000000; } .t1.bt-1-black { border-top: 1px solid #000000; } .t1.br-1-black { border-right: 1px solid #000000; } .t1.bb-1-black { border-bottom: 1px solid #000000; } .t1.bl-1-black { border-left: 1px solid #000000; }
Definition order. `bl` shall override `bx` which in turn shall override the most generic `b`.
t1 b-1-dashed-black bx-1-dashed-black by-1-dashed-black bt-1-dashed-black br-1-dashed-black bb-1-dashed-black bl-1-dashed-black
.t1.b-1-dashed-black { border: 1px dashed #000000; } .t1.bx-1-dashed-black { border-left: 1px dashed #000000; border-right: 1px dashed #000000; } .t1.by-1-dashed-black { border-top: 1px dashed #000000; border-bottom: 1px dashed #000000; } .t1.bt-1-dashed-black { border-top: 1px dashed #000000; } .t1.br-1-dashed-black { border-right: 1px dashed #000000; } .t1.bb-1-dashed-black { border-bottom: 1px dashed #000000; } .t1.bl-1-dashed-black { border-left: 1px dashed #000000; }