邊框與外框
邊框樣式border-style
Setting the line style for an element’s border.
Overview
| Class | Declarations |
|---|---|
b-none | border-style: none;
|
b-hidden | border-style: hidden;
|
b-dotted | border-style: dotted;
|
b-dashed | border-style: dashed;
|
b-solid | border-style: solid;
|
b-double | border-style: double;
|
b-groove | border-style: groove;
|
b-ridge | border-style: ridge;
|
b-inset | border-style: inset;
|
b-outset | border-style: outset;
|
bx-solid | border-inline-style: solid;
|
by-solid | border-block-style: solid;
|
b:<style> | border-color: <style>;
|
bt:<style> | border-top-color: <style>;
|
bb:<style> | border-bottom-color: <style>;
|
bl:<style> | border-left-color: <style>;
|
br:<style> | border-right-color: <style>;
|
bx:<style> | border-inline-color: <style>;
|
by:<style> | border-block-color: <style>;
|
Examples
Set border style
Use b-solid, b-dashed, and related short style utilities to set border-style.
<div class="b:1px b-solid"> ...</div>Generated CSS
@layer utilities { .b-solid { border-style: solid }}Use dashed or dotted borders
Use b-dashed or b-dotted for separators, drop zones, and placeholder states.
<div class="b:1px b-dashed">Upload files</div>Remove border style
Use b-none when a border rule should no longer render.
<button class="b-none">...</button>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="b-solid b-dashed:hover b-none@print">...</div>Use side aliases such as bt-solid when only one side should change style.