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: <style>;
|
bt:<style> | border-top: <style>;
|
bb:<style> | border-bottom: <style>;
|
bl:<style> | border-left: <style>;
|
br:<style> | border-right: <style>;
|
bx:<style> | border-inline: <style>;
|
by:<style> | border-block: <style>;
|
Examples
Set border style
b-solid sets the style independently of width and color. A border needs all three to be visible.
<!-- Solid style · 3px width --><div id="target" class="flex items-center justify-center h:96px w:240px max-w:100% p-md b-solid border-width:3px b-blue font-md bg-surface-muted text-body box-border"> Preview panel</div>Generated CSS
@layer utilities { .b-solid { border-style: solid }}Use dashed or dotted borders
Compare dashed and dotted borders of the same box. Both use a 3px border; the browser distributes the pattern along each edge.
<!-- Dashed border --><div id="target" class="flex items-center justify-center h:96px w:240px max-w:100% p-md b-dashed border-width:3px b-blue font-md bg-surface-muted text-body box-border"> Dashed frame</div><!-- Dotted border --><div id="target" class="flex items-center justify-center h:96px w:240px max-w:100% p-md b-dotted border-width:3px b-blue font-md bg-surface-muted text-body box-border"> Dotted frame</div>Use these patterns to support a visible label. The decorative samples do not imply an active upload or drag target.
Remove border style
b-none and b-hidden both produce zero used border width on these ordinary boxes. Compare them with a solid 6px border while the declared content dimensions remain 160 × 48.
<!-- Solid · border adds to content box --><div id="target" class="h:48px w:160px p-md b-solid border-width:6px b-blue bg-surface-muted text-body box-content"> Content box</div><!-- None · no used border width --><div id="target" class="h:48px w:160px p-md b-none border-width:6px b-blue bg-surface-muted text-body box-content"> Content box</div><!-- Hidden · same ordinary box geometry --><div id="target" class="h:48px w:160px p-md b-hidden border-width:6px b-blue bg-surface-muted text-body box-content"> Content box</div>hidden differs from none in collapsed-table border conflict resolution. It does not hide the element or its content; see border collapse.
Apply conditionally
Hover or keyboard-focus this button to switch from solid to dashed without changing its width or color. Print removes the border style.
<!-- Solid → dashed · width stays 2px --><button id="target" type="button" class="inline-flex items-center justify-center min-h:44px max-w:100% px-md py-sm b-solid border-width:2px b-blue r-sm font-md bg-surface-base text-body box-border bg-surface-muted:focus-visible b-none@print b-dashed:hover@screen b-dashed:focus-visible@screen"> Preview details</button>A side alias such as bt-dashed changes only the top edge. The button’s independent focus ring remains available.