Borders & Outlines
border-width
Setting the width of an element’s border.
Overview
| Class | Declarations |
|---|---|
b:<size> | border-width: <size>;
|
bt:<size> | border-top-width: <size>;
|
bb:<size> | border-bottom-width: <size>;
|
bl:<size> | border-left-width: <size>;
|
br:<size> | border-right-width: <size>;
|
bx:<size> | border-inline-width: <size>;
|
by:<size> | border-block-width: <size>;
|
Examples
Set border width
Use b:* with a size value to set border-width.
<div class="b-solid b:1px"> ...</div>Generated CSS
@layer utilities { .b\:1px { border-width: 1px }}Set one side or axis
Use bt:*, br:*, bb:*, and bl:* for physical sides. Use bx:* and by:* for logical axes.
<div class="by:1px bt:2px">...</div>Use border when width, style, and color should be declared together.
Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="b:0 b:0@print b:1px@sm">...</div>Remember that a border is not visible unless its style is not none.