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 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 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.