Border width

Syntax

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

Parameters

value
<length unsigned default-unit=1px>

Border styles

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

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Border width of 1px on all sides, provided as unitless number.
t1 b-1
.t1.b-1 { border-width: 1px; }
Border width of 1px on all sides, provided as length.
t1 b-1px
.t1.b-1px { border-width: 1px; }
Left and right border width of 1px, provided as unitless number.
t1 bx-1
.t1.bx-1 { border-left-width: 1px; border-right-width: 1px; }
Left and right border width of 1px, provided as length.
t1 bx-1px
.t1.bx-1px { border-left-width: 1px; border-right-width: 1px; }
Top and bottom border width of 1px, provided as unitless number.
t1 by-1
.t1.by-1 { border-top-width: 1px; border-bottom-width: 1px; }
Top and bottom border width of 1px, provided as length.
t1 by-1px
.t1.by-1px { border-top-width: 1px; border-bottom-width: 1px; }
Top border width of 1px, provided as unitless number.
t1 bt-1
.t1.bt-1 { border-top-width: 1px; }
Top border width of 1px, provided as length.
t1 bt-1px
.t1.bt-1px { border-top-width: 1px; }
Right border width of 1px, provided as unitless number.
t1 br-1
.t1.br-1 { border-right-width: 1px; }
Right border width of 1px, provided as length.
t1 br-1px
.t1.br-1px { border-right-width: 1px; }
Bottom border width of 1px, provided as unitless number.
t1 bb-1
.t1.bb-1 { border-bottom-width: 1px; }
Bottom border width of 1px, provided as length.
t1 bb-1px
.t1.bb-1px { border-bottom-width: 1px; }
Left border width of 1px, provided as unitless number.
t1 bl-1
.t1.bl-1 { border-left-width: 1px; }
Left border width of 1px, provided as length.
t1 bl-1px
.t1.bl-1px { border-left-width: 1px; }
More specific border widths shall override less specific border widths. (They shall come later in the generated CSS.)
t1 bl-1 bb-1 br-1 bt-1 bx-1 by-1 b-1
.t1.b-1 { border-width: 1px; } .t1.bx-1 { border-left-width: 1px; border-right-width: 1px; } .t1.by-1 { border-top-width: 1px; border-bottom-width: 1px; } .t1.bt-1 { border-top-width: 1px; } .t1.br-1 { border-right-width: 1px; } .t1.bb-1 { border-bottom-width: 1px; } .t1.bl-1 { border-left-width: 1px; }