Skip to main content

Border Width

Set the width for element borders.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

bw:0
border-width: 0;
bw:1
border-width: 1px;
bw:2
border-width: 2px;
bw:3
border-width: 3px;
bw:4
border-width: 4px;
bw:5
border-width: 5px;
bw:6
border-width: 6px;
bw:7
border-width: 7px;
bw:8
border-width: 8px;

Border Block End Width

bbew:0
border-block-end-width: 0;
bbew:1
border-block-end-width: 1px;
bbew:2
border-block-end-width: 2px;
bbew:3
border-block-end-width: 3px;
bbew:4
border-block-end-width: 4px;
bbew:5
border-block-end-width: 5px;
bbew:6
border-block-end-width: 6px;
bbew:7
border-block-end-width: 7px;
bbew:8
border-block-end-width: 8px;

Border Block Start Width

bbsw:0
border-block-start-width: 0;
bbsw:1
border-block-start-width: 1px;
bbsw:2
border-block-start-width: 2px;
bbsw:3
border-block-start-width: 3px;
bbsw:4
border-block-start-width: 4px;
bbsw:5
border-block-start-width: 5px;
bbsw:6
border-block-start-width: 6px;
bbsw:7
border-block-start-width: 7px;
bbsw:8
border-block-start-width: 8px;

Border Block Width

byw:0
border-block-width: 0;
byw:1
border-block-width: 1px;
byw:2
border-block-width: 2px;
byw:3
border-block-width: 3px;
byw:4
border-block-width: 4px;
byw:5
border-block-width: 5px;
byw:6
border-block-width: 6px;
byw:7
border-block-width: 7px;
byw:8
border-block-width: 8px;

Border Bottom Width

bbw:0
border-bottom-width: 0;
bbw:1
border-bottom-width: 1px;
bbw:2
border-bottom-width: 2px;
bbw:3
border-bottom-width: 3px;
bbw:4
border-bottom-width: 4px;
bbw:5
border-bottom-width: 5px;
bbw:6
border-bottom-width: 6px;
bbw:7
border-bottom-width: 7px;
bbw:8
border-bottom-width: 8px;

Border Inline End Width

biew:0
border-inline-end-width: 0;
biew:1
border-inline-end-width: 1px;
biew:2
border-inline-end-width: 2px;
biew:3
border-inline-end-width: 3px;
biew:4
border-inline-end-width: 4px;
biew:5
border-inline-end-width: 5px;
biew:6
border-inline-end-width: 6px;
biew:7
border-inline-end-width: 7px;
biew:8
border-inline-end-width: 8px;

Border Inline Start Width

bisw:0
border-inline-start-width: 0;
bisw:1
border-inline-start-width: 1px;
bisw:2
border-inline-start-width: 2px;
bisw:3
border-inline-start-width: 3px;
bisw:4
border-inline-start-width: 4px;
bisw:5
border-inline-start-width: 5px;
bisw:6
border-inline-start-width: 6px;
bisw:7
border-inline-start-width: 7px;
bisw:8
border-inline-start-width: 8px;

Border Inline Width

bxw:0
border-inline-width: 0;
bxw:1
border-inline-width: 1px;
bxw:2
border-inline-width: 2px;
bxw:3
border-inline-width: 3px;
bxw:4
border-inline-width: 4px;
bxw:5
border-inline-width: 5px;
bxw:6
border-inline-width: 6px;
bxw:7
border-inline-width: 7px;
bxw:8
border-inline-width: 8px;

Border Left Width

blw:0
border-left-width: 0;
blw:1
border-left-width: 1px;
blw:2
border-left-width: 2px;
blw:3
border-left-width: 3px;
blw:4
border-left-width: 4px;
blw:5
border-left-width: 5px;
blw:6
border-left-width: 6px;
blw:7
border-left-width: 7px;
blw:8
border-left-width: 8px;

Border Right Width

brw:0
border-right-width: 0;
brw:1
border-right-width: 1px;
brw:2
border-right-width: 2px;
brw:3
border-right-width: 3px;
brw:4
border-right-width: 4px;
brw:5
border-right-width: 5px;
brw:6
border-right-width: 6px;
brw:7
border-right-width: 7px;
brw:8
border-right-width: 8px;

Border Top Width

btw:0
border-top-width: 0;
btw:1
border-top-width: 1px;
btw:2
border-top-width: 2px;
btw:3
border-top-width: 3px;
btw:4
border-top-width: 4px;
btw:5
border-top-width: 5px;
btw:6
border-top-width: 6px;
btw:7
border-top-width: 7px;
btw:8
border-top-width: 8px;

Media Queries

Prefix a class with a breakpoint to apply it from that width up.

Pseudo Classes

Prefix a class with a state to apply it only while that state matches.