- ☀️Light
- 🌙Dark
- 💻System
📐 What are borders used for?
Border utilities let you quickly control which sides of an element are bordered,
as well as border style, width, and radius. They are designed to work together with
the global border tokens (
--border-width,
--border-style,
--border-color) so you can keep a consistent
look across your design system.
You can add borders to individual sides, both horizontal or vertical sides, or all around an element. Then you can refine the style (solid, dashed, dotted, etc.), the width, and the corner radius using dedicated utility classes.
💠 Examples
The following examples show how to combine side, style, width, and radius utilities to create different border appearances.
.border-top
.border-x
.border-all
.border-all .border-solid
.border-all .border-dashed
.border-all .border-dotted
.border-all .border-1
.border-all .border-3
.border-all .border-5
.border-all .rounded-0
.border-all .rounded
.border-all .rounded-pill
.rounded-circle
💻 HTML Code
Top border only
Left and right borders
Border on all sides
Solid border
Dashed border
Dotted border
Thin border
Medium border
Thick border
Square corners
Default rounded corners
Pill-shaped corners
Circle / full radius
📏 Border Utilities
Border utilities follow a simple and predictable naming pattern. You can combine side, style, width, and radius utilities to get the desired appearance, while still relying on a consistent set of design tokens.
.border-{side}
Adds a border to a specific side or group of sides:
.border-top,
.border-bottom,
.border-left,
.border-right,
.border-x,
.border-y,
.border-all.
.border-{style}
Overrides the border style:
.border-solid,
.border-dashed,
.border-dotted,
.border-double,
.border-none.
.border-{width}
Sets the border width using a scale:
.border-0,
.border-1,
.border-2,
.border-3,
.border-4,
.border-5.
.rounded*
Controls the corner radius:
.rounded-0 (no radius),
.rounded / .border-radius (default radius),
.rounded-pill (pill shape),
.rounded-circle (full circle).
⚙️ Variables CSS
| Variable | Description |
|---|---|
--border-color |
Default border color. |
--border-radius |
Default border radius. |
--border-radius-circle |
Fully rounded border radius (circle). |
--border-radius-pill |
Pill-shaped border radius for rounded elements. |
--border-style |
Default border style (solid, dashed, etc.). |
--border-style-outline |
Outline border style. |
--border-width |
Default border thickness. |
--border-width-outline |
Thickness of the outline border. |