Border style

Syntax

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

Parameters

style
solid | dashed | dotted | double | none

Border styles

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

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Solid borders.
t1 b-solid
.t1.b-solid { border-style: solid; }
Dashed borders.
t1 b-dashed
.t1.b-dashed { border-style: dashed; }
Dotted borders.
t1 b-dotted
.t1.b-dotted { border-style: dotted; }
Double solid borders.
t1 b-double
.t1.b-double { border-style: double; }
No borders
t1 b-none
.t1.b-none { border-style: none; }
Solid left and right borders.
t1 bx-solid
.t1.bx-solid { border-left-style: solid; border-right-style: solid; }
Dashed left and right borders.
t1 bx-dashed
.t1.bx-dashed { border-left-style: dashed; border-right-style: dashed; }
Dotted left and right borders.
t1 bx-dotted
.t1.bx-dotted { border-left-style: dotted; border-right-style: dotted; }
Double solid left and right borders.
t1 bx-double
.t1.bx-double { border-left-style: double; border-right-style: double; }
No left and right borders
t1 bx-none
.t1.bx-none { border-left-style: none; border-right-style: none; }
Solid top and bottom borders.
t1 by-solid
.t1.by-solid { border-top-style: solid; border-bottom-style: solid; }
Dashed top and bottom borders.
t1 by-dashed
.t1.by-dashed { border-top-style: dashed; border-bottom-style: dashed; }
Dotted top and bottom borders.
t1 by-dotted
.t1.by-dotted { border-top-style: dotted; border-bottom-style: dotted; }
Double solid top and bottom borders.
t1 by-double
.t1.by-double { border-top-style: double; border-bottom-style: double; }
No top and bottom borders
t1 by-none
.t1.by-none { border-top-style: none; border-bottom-style: none; }
Solid top borders.
t1 bt-solid
.t1.bt-solid { border-top-style: solid; }
Dashed top borders.
t1 bt-dashed
.t1.bt-dashed { border-top-style: dashed; }
Dotted top borders.
t1 bt-dotted
.t1.bt-dotted { border-top-style: dotted; }
Double solid top borders.
t1 bt-double
.t1.bt-double { border-top-style: double; }
No top borders
t1 bt-none
.t1.bt-none { border-top-style: none; }
Solid right borders.
t1 br-solid
.t1.br-solid { border-right-style: solid; }
Dashed right borders.
t1 br-dashed
.t1.br-dashed { border-right-style: dashed; }
Dotted right borders.
t1 br-dotted
.t1.br-dotted { border-right-style: dotted; }
Double solid right borders.
t1 br-double
.t1.br-double { border-right-style: double; }
No right borders
t1 br-none
.t1.br-none { border-right-style: none; }
Solid bottom borders.
t1 bb-solid
.t1.bb-solid { border-bottom-style: solid; }
Dashed bottom borders.
t1 bb-dashed
.t1.bb-dashed { border-bottom-style: dashed; }
Dotted bottom borders.
t1 bb-dotted
.t1.bb-dotted { border-bottom-style: dotted; }
Double solid bottom borders.
t1 bb-double
.t1.bb-double { border-bottom-style: double; }
No bottom borders
t1 bb-none
.t1.bb-none { border-bottom-style: none; }
Solid left borders.
t1 bl-solid
.t1.bl-solid { border-left-style: solid; }
Dashed left borders.
t1 bl-dashed
.t1.bl-dashed { border-left-style: dashed; }
Dotted left borders.
t1 bl-dotted
.t1.bl-dotted { border-left-style: dotted; }
Double solid left borders.
t1 bl-double
.t1.bl-double { border-left-style: double; }
No left borders
t1 bl-none
.t1.bl-none { border-left-style: none; }
Definition order.
t1 b-solid bx-solid by-solid bt-solid br-solid bb-solid bl-solid
.t1.b-solid { border-style: solid; } .t1.bx-solid { border-left-style: solid; border-right-style: solid; } .t1.by-solid { border-top-style: solid; border-bottom-style: solid; } .t1.bt-solid { border-top-style: solid; } .t1.br-solid { border-right-style: solid; } .t1.bb-solid { border-bottom-style: solid; } .t1.bl-solid { border-left-style: solid; }