Borders & Outlines

border-width

Setting the width of an element’s border.

Class	Declarations
`b:<size>`	`border: <size>;`
`bt:<size>`	`border-top: <size>;`
`bb:<size>`	`border-bottom: <size>;`
`bl:<size>`	`border-left: <size>;`
`br:<size>`	`border-right: <size>;`
`bx:<size>`	`border-inline: <size>;`
`by:<size>`	`border-block: <size>;`

Examples

Set border width

b:<size> changes only border width. Both panels below have the same 240 × 96 border box. A thicker border leaves less room for content and padding inside that fixed outer size.

Set border width

Compare the resolved edge widths with the measured outer box. Box sizing determines whether the border fits within the declared dimensions.

<!-- 2px border · fixed outer box --><div id="target"  class="flex items-center justify-center h:96px         w:240px max-w:100% p-md b-solid border-width:2px b-blue         font-md bg-surface-muted text-body         box-border">  Preview panel</div>

<!-- 8px border · same outer box --><div id="target"  class="flex items-center justify-center h:96px         w:240px max-w:100% p-md b-solid border-width:8px b-blue         font-md bg-surface-muted text-body         box-border">  Preview panel</div>

Generated CSS

@layer utilities {  .border-width\:2px {    border-width: 2px  }}

With box-content, border widths add outside the declared content dimensions instead. A none or hidden border style produces zero used width.

Set one side or axis

Physical aliases such as bt always address the named edge. by changes the block-axis pair, which becomes the left and right edges in vertical writing.

Set one side or axis

Compare the resolved edge widths with the measured outer box. Box sizing determines whether the border fits within the declared dimensions.

<!-- Top edge · physical --><div id="target"  class="flex items-center justify-center h:96px         w:240px max-w:100% p-md b-solid b-blue border-bottom-width:0         border-left-width:0 border-right-width:0 border-top-width:6px font-md bg-surface-muted         text-body box-border">  Top: 6px</div>

<!-- Block edges · horizontal writing --><div id="target"  class="flex items-center justify-center h:96px         w:240px max-w:100% p-md b-solid border-width:0 b-blue         border-block-width:6px font-md bg-surface-muted text-body         box-border">  Top and bottom: 6px</div>

<!-- Block edges · vertical writing --><div id="target"  class="flex items-center justify-center h:96px         w:240px max-w:100% p-md b-solid border-width:0 b-blue         border-block-width:6px font-md bg-surface-muted text-body         box-border writing-mode:vertical-rl">  Left and right: 6px</div>

bx sets inline-axis widths. Keep a visible style and color when adjusting width independently.

Apply conditionally

Widen to sm to add a 6px border. The explicitly fixed border-box dimensions remain unchanged; the content area becomes smaller. Print returns to zero width.

Apply conditionally

Compare the resolved edge widths with the measured outer box. Box sizing determines whether the border fits within the declared dimensions.

<!-- 0 → 6px at sm · fixed outer geometry --><div id="target"  class="flex items-center justify-center h:96px         w:240px max-w:100% p-md b-solid border-width:0 b-blue         font-md bg-surface-muted text-body         box-border border-width:0@print border-width:6px@screen@sm">  Preview panel</div>