border
Setting an element’s border.
Overview
| Class | Declarations |
|---|---|
b:<size>|<style>|<color> | border: <size> <style> <color>;
|
bt:<size>|<style>|<color> | border-top: <size> <style> <color>;
|
bb:<size>|<style>|<color> | border-bottom: <size> <style> <color>;
|
bl:<size>|<style>|<color> | border-left: <size> <style> <color>;
|
br:<size>|<style>|<color> | border-right: <size> <style> <color>;
|
bx:<size>|<style>|<color> | border-inline: <size> <style> <color>;
|
by:<size>|<style>|<color> | border-block: <size> <style> <color>;
|
Examples
Set width, style, and color together
Use b:<size>|<style>|<color> for the native border shorthand. This panel supplies its own size and padding; the 2px border is part of its 240 × 96 border box.
<!-- 2px · solid · blue --><div id="target" class="flex items-center justify-center h:96px w:240px max-w:100% p-md b:2px|solid|var(--color-blue) font-md bg-surface-muted text-body box-border"> Preview panel</div>Generated CSS
@layer theme { :root, :host { --color-blue: var(--color-blue-60); --color-blue-60: oklch(51.83% .2687 266.1); --color-blue-50: oklch(58.22% .2279 263.9) } @media (prefers-color-scheme:light) { :root { --color-blue: var(--color-blue-60) } } @media (prefers-color-scheme:light) { :host { --color-blue: var(--color-blue-60) } } @media (prefers-color-scheme:dark) { :root { --color-blue: var(--color-blue-50) } } @media (prefers-color-scheme:dark) { :host { --color-blue: var(--color-blue-50) } }}@layer utilities { .b\:2px\|solid\|var\(--color-blue\) { border: 2px solid var(--color-blue) }}The shorthand resets omitted border width, style and color components. The all-side border shorthand also resets border-image; use a focused longhand when the other parts should remain.
Set one side or one axis
bt, br, bb and bl address physical edges. bx addresses the inline axis; by addresses the block axis. Compare the same inline borders in horizontal and vertical writing.
<!-- Physical bottom · horizontal writing --><div id="target" class="flex items-center justify-center h:96px w:240px max-w:100% p-md bb:3px|solid|var(--color-blue) font-md bg-surface-muted text-body box-border"> Bottom edge</div><!-- Inline edges · horizontal writing --><div id="target" class="flex items-center justify-center h:96px w:240px max-w:100% p-md bx:3px|solid|var(--color-blue) font-md bg-surface-muted text-body box-border"> Left and right</div><!-- Inline edges · vertical writing --><div id="target" class="flex items-center justify-center h:96px w:240px max-w:100% p-md bx:3px|solid|var(--color-blue) font-md bg-surface-muted text-body box-border writing-mode:vertical-rl"> Top and bottom</div>Logical edges follow writing mode. A physical bottom border stays on the bottom when writing direction changes.
Use focused border utilities
Hover or keyboard-focus each panel. The first changes only width and keeps its dashed blue border. The second sets the full shorthand to solid, resetting width to medium and color to the foreground.
<!-- Width longhand · preserves style and color --><button id="target" type="button" class="inline-flex items-center justify-center min-h:44px max-w:100% px-md py-sm b:2px|dashed|var(--color-blue) r-sm font-md bg-surface-base text-body box-border bg-surface-muted:focus-visible border-width:6px:hover@screen border-width:6px:focus-visible@screen"> Preview details</button><!-- Full shorthand · resets omitted components --><button id="target" type="button" class="inline-flex items-center justify-center min-h:44px max-w:100% px-md py-sm b:2px|dashed|var(--color-blue) r-sm font-md bg-surface-base text-body box-border bg-surface-muted:focus-visible b:solid:hover@screen b:solid:focus-visible@screen"> Preview details</button>Use border-width, border-style and border-color for independent changes. These content-sized buttons grow when their border width grows.
Apply conditionally
Hover or keyboard-focus the button to change its complete border from a subtle solid line to a blue dashed line. Print removes the border width.
<!-- Solid → dashed on interaction --><button id="target" type="button" class="inline-flex items-center justify-center min-h:44px max-w:100% px-md py-sm b:1px|solid|var(--color-line-base) r-sm font-md bg-surface-base text-body box-border bg-surface-muted:focus-visible border-width:0@print b:2px|dashed|var(--color-blue):hover@screen b:2px|dashed|var(--color-blue):focus-visible@screen"> Preview details</button>The focus ring remains visible independently of the border. Selectors respond to the real control; the print rule uses the browser’s actual print medium.