邊框與外框
邊框寬度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:1px b-solid"> ...</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="bt:2px by:1px">...</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:1px@sm b:0@print">...</div>Remember that a border is not visible unless its style is not none.