Borders & Outlines
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.
<div class="b:1px|solid|gray-20"> ...</div>Generated CSS
@layer theme { :root { --color-gray-20: oklch(82% 0 none) }}@layer utilities { .b\:1px\|solid\|gray-20 { border: 1px solid var(--color-gray-20) }}Set one side or one axis
Use bt, br, bb, and bl for one side. Use bx and by for logical axes.
<header class="bb:1px|solid|gray-20">...</header><section class="bx:1px|solid|gray-20">...</section>Use focused border utilities
Use border-width, border-style, and border-color when only one part of the border should change.
<div class="b:1px b-solid">...</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="b:1px|solid|gray-20 b:1px|solid|blue-60:hover b:0@print">...</div>The border shorthand resets border width, style, and color for the targeted side or axis.