Borders
Border utilities draw borders, colour them, change their style and round corners. Widths and radii come from token scales, and colours come from theme tokens, so borders follow the active theme and can be retuned in one place.
How borders work
Section titled “How borders work”- Width draws the border.
border,border-2and the side classes set the width, a solid style and the--nu-border-regularcolour in one class. Colour and style classes only change a border that is already drawn. - Tokens. Widths output
var(--nu-border-width-{key})and radii outputvar(--nu-radius-{key}). - Logical sides.
sandemean the inline start and end sides, which swap in right-to-left layouts.
| Part | Meaning | Examples |
|---|---|---|
border, border-{width} |
All sides | border, border-2 |
t, r, b, l |
Top, right, bottom, left (physical) | border-t, border-l-4 |
s, e |
Inline start, inline end (logical) | border-s, border-e-2 |
x, y |
Left and right, top and bottom | border-x, border-y-2 |
border-{colour} |
Border colour | border-danger, border-strong |
border-{style} |
Border style | border-dashed |
rounded, rounded-{key} |
Corner radius | rounded, rounded-lg, rounded-s-md |
border-x and border-y are physical: border-x sets the left and right borders in both directions.
The width scale is generated from the compiled core build.
| Key | Token | Value |
|---|---|---|
0 | --nu-border-width-0 | 0px |
1 | --nu-border-width-1 | 1px |
2 | --nu-border-width-2 | 2px |
4 | --nu-border-width-4 | 4px |
8 | --nu-border-width-8 | 8px |
border is the same as border-1. border-0 sets the width to zero and leaves style and colour alone.
border
border-2
border-4
border-8
<div class="flex wrap gap-4"> <div class="border p-3 rounded">border</div> <div class="border-2 p-3 rounded">border-2</div> <div class="border-4 p-3 rounded">border-4</div> <div class="border-8 p-3 rounded">border-8</div></div>.card { @include apply(border(1));}.callout { @include apply(border(4));}border-t-2
border-b-2
border-x-2
border-y-2
<div class="flex wrap gap-4"> <div class="border-t-2 p-3">border-t-2</div> <div class="border-b-2 p-3">border-b-2</div> <div class="border-x-2 p-3">border-x-2</div> <div class="border-y-2 p-3">border-y-2</div></div>Logical sides
Section titled “Logical sides”border-s and border-e set border-inline-start and border-inline-end. The same markup is rendered left to right and right to left: the logical accent moves to the start side, the physical one stays on the left.
LTR
border-s-4: start side
border-l-4: always left
RTL
border-s-4: start side
border-l-4: always left
<div class="space-y-2"> <div class="border-s-4 border-brand ps-3 py-2">border-s-4: start side</div> <div class="border-l-4 border-brand ps-3 py-2">border-l-4: always left</div></div>.quote { @include apply(border-start(4, solid, brand), ps(3));}Colour
Section titled “Colour”A colour class sets border-color only. Combine it with a width class, which draws the border.
| Class | Colour | Changes with the theme |
|---|---|---|
border-regular, border-strong |
Default and stronger edges | Yes |
border-control, border-control-hover |
Form control edges, darker for 3:1 contrast | Yes |
border-brand, border-danger, border-warning, border-success, border-info |
--nu-{role} |
Yes |
border-error |
Alias of border-danger |
Yes |
border-gray, border-red, border-blue, border-green, border-yellow, border-purple, border-pink |
--nu-{hue}-500 |
No |
border-{name}-{stop} |
--nu-{name}-{stop}, stops 50 to 950, for roles and hues |
No |
border-black, border-white, border-transparent |
Basic colours | No |
regular
strong
control
brand
danger
success
purple
purple-300
<div class="flex wrap gap-3"> <div class="border-2 border-regular p-3 rounded">regular</div> <div class="border-2 border-strong p-3 rounded">strong</div> <div class="border-2 border-control p-3 rounded">control</div> <div class="border-2 border-brand p-3 rounded">brand</div> <div class="border-2 border-danger p-3 rounded">danger</div> <div class="border-2 border-success p-3 rounded">success</div> <div class="border-2 border-purple p-3 rounded">purple</div> <div class="border-2 border-purple-300 p-3 rounded">purple-300</div></div>.alert { @include apply(border(2, solid, danger));}.tag { @include apply(border(1), border-color(purple, 300));}The theme border tokens, generated from the compiled core build (light theme values):
| Key | Token | Value |
|---|---|---|
regular | --nu-border-regular | #d3d5d9 |
strong | --nu-border-strong | var(--nu-gray-400) |
control | --nu-border-control | var(--nu-gray-500) |
control-hover | --nu-border-control-hover | var(--nu-gray-600) |
focus | --nu-border-focus | var(--nu-brand-600) |
focus-width | --nu-border-focus-width | 2px |
focus-offset | --nu-border-focus-offset | 2px |
--nu-border-focus colours the focus ring, which core applies through outline, not border. There is no border-focus class; use border-color(focus) or token(border-focus) when you need it.
Role state words (danger-hover, brand-active, danger-border) have no classes. Use them through border-color() or token().
Every border class sets its style through the internal custom property --nu-border-style. A style class (border-solid, border-dashed, border-dotted, border-double, border-none) changes that property, so it restyles whichever borders the element already draws, on any side.
border-2 border-dashed
border-2 border-dotted
border-4 border-double
border-t-2 border-dashed
<div class="flex wrap gap-4"> <div class="border-2 border-dashed p-3 rounded">border-2 border-dashed</div> <div class="border-2 border-dotted p-3 rounded">border-2 border-dotted</div> <div class="border-4 border-double p-3 rounded">border-4 border-double</div> <div class="border-t-2 border-dashed p-3">border-t-2 border-dashed</div></div>.dropzone { @include apply(border(2), border-style(dashed));}.divider { @include apply(border-top(2, dashed));}border-t border-dashed gives a dashed top border only: the other sides have no width, so the style has nothing else to draw. Style classes are emitted after every width class, responsive ones included, so a width class never resets the style.
In SCSS, pass the style as the second argument of border() or a side mixin, or include border-style() after the border mixin. border-style() on its own draws nothing.
Radius
Section titled “Radius”| Key | Token | Value | Pixels |
|---|---|---|---|
xs | --nu-radius-xs | 0.25rem | 4px |
sm | --nu-radius-sm | 0.375rem | 6px |
md | --nu-radius-md | 0.5rem | 8px |
lg | --nu-radius-lg | 0.75rem | 12px |
xl | --nu-radius-xl | 1rem | 16px |
2xl | --nu-radius-2xl | 1.25rem | 20px |
full | --nu-radius-full | 99in | |
none | --nu-radius-none | 0 | 0px |
rounded uses the md radius. square removes rounding (none) and pill rounds fully (full), for badges and pill buttons.
square
rounded-sm
rounded
rounded-xl
pill
<div class="flex wrap gap-3"> <div class="square border p-3">square</div> <div class="rounded-sm border p-3">rounded-sm</div> <div class="rounded border p-3">rounded</div> <div class="rounded-xl border p-3">rounded-xl</div> <div class="pill border px-4 py-2">pill</div></div>.card { @include apply(rounded);}.badge { @include apply(pill, px(3));}Sides and corners
Section titled “Sides and corners”| Classes | Corners |
|---|---|
rounded-t-*, rounded-r-*, rounded-b-*, rounded-l-* |
Both corners of one physical side |
rounded-tl-*, rounded-tr-*, rounded-br-*, rounded-bl-* |
One physical corner |
rounded-s-*, rounded-e-* |
Both corners of the inline start or end side (logical) |
rounded-ss-*, rounded-se-*, rounded-es-*, rounded-ee-* |
One logical corner: block start or end, then inline start or end |
Side and corner classes always take a key (rounded-s-lg); only rounded has a bare form.
LTR
rounded-s-xl
rounded-e-xl
rounded-ss-xl
rounded-tl-xl
RTL
rounded-s-xl
rounded-e-xl
rounded-ss-xl
rounded-tl-xl
<div class="flex gap-2"> <div class="rounded-s-xl bg-brand-subtle p-3">rounded-s-xl</div> <div class="rounded-e-xl bg-brand-subtle p-3">rounded-e-xl</div> <div class="rounded-ss-xl bg-alternate p-3">rounded-ss-xl</div> <div class="rounded-tl-xl bg-alternate p-3">rounded-tl-xl</div></div>.segment--first { @include apply(rounded-s(lg));}.segment--last { @include apply(rounded-e(lg));}State variants
Section titled “State variants”| Variant | Classes |
|---|---|
hover:, focus:, active:, group-hover: |
Width (hover:border-2), colour (focus:border-brand) and style (hover:border-dashed) |
State width classes change the width only, so the element keeps its style and colour. Side widths and radius classes have no state variants.
Hover me
<div class="flex wrap gap-3"> <input class="border border-control focus:border-brand rounded px-3 py-2" placeholder="Focus me" /> <div class="border-2 border-dashed hover:border-solid hover:border-brand p-3 rounded">Hover me</div></div>.field { @include apply(border(1, solid, control), border-color(control-hover) hover, border-color(brand) focus);}Responsive variants
Section titled “Responsive variants”These classes have responsive variants with an @{breakpoint} suffix: border@md, border-{width}@md, rounded@md, rounded-{key}@md, square@md and pill@md. Side widths, colours, styles and side or corner radii have no responsive variants.
border-0 border-2@md rounded-none rounded-xl@md: resize the window
<div class="border-0 border-2@md rounded-none rounded-xl@md p-4 bg-surface"> border-0 border-2@md rounded-none rounded-xl@md: resize the window</div>.panel { @include apply(border(0), border(2) md, rounded(none), rounded(xl) md);}| Suffix | Media query |
|---|---|
@xs | @media (min-width: 480px) |
@sm | @media (min-width: 640px) |
@md | @media (min-width: 768px) |
@lg | @media (min-width: 1024px) |
@xl | @media (min-width: 1280px) |
@2xl | @media (min-width: 1536px) |
@use "@nuvoui/core" as *;
.card { @include apply(border(1), rounded(lg));}.alert { @include apply(border(2, dashed, danger), rounded(md));}.card { border-width: var(--nu-border-width-1); border-style: var(--nu-border-style); border-color: var(--nu-border-regular); --nu-border-style: solid; border-radius: var(--nu-radius-lg);}.alert { border-width: var(--nu-border-width-2); border-style: var(--nu-border-style); border-color: var(--nu-danger); --nu-border-style: dashed; border-radius: var(--nu-radius-md);}| Mixin | Arguments |
|---|---|
border($width, $style: solid, $color: null) |
Width key or length; style; colour (defaults to --nu-border-regular) |
border-top(), border-right(), border-bottom(), border-left() |
As border(), for one physical side |
border-start(), border-end() |
As border(), for the inline start or end side (classes border-s, border-e) |
border-all($width, $style, $color) |
All three required; same output as border() |
border-style($style) |
solid, dashed, dotted, double, none, a CSS-wide keyword or var() |
border-color($color, $shade: null) |
Role, role state, palette name, theme word (regular, strong, control, control-hover, focus), colour value or var(); an optional stop 50 to 950 |
rounded($key: null) and the side and corner mixins |
Radius key (default md) or a length, calc() or var() |
pill |
No argument; var(--nu-radius-full) |
There is no square mixin; use rounded(none). The logical width mixins are named border-start() and border-end(), not border-s().
Keys and custom values
Section titled “Keys and custom values”A unitless width is a key of $border-widths and a radius word is a key of $border-radii. A value with a unit is used as written.
.frame { @include apply(border(3px, solid, strong), rounded(10px));}Tokens in your own CSS
Section titled “Tokens in your own CSS”.note { border-inline-start: token(border-width-4) solid token(warning); border-radius: token(radius-sm);}Configuration
Section titled “Configuration”$border-widths is a list of pixel values and $border-radii is a map. Each replaces the default; it is not merged. The base styles need widths 1 and 4 and radius xs, and the classes need radii md (rounded), none (square) and full (pill), so keep those keys.
@use "@nuvoui/core" with ( $generate-utility-classes: true, $border-widths: (0, 1, 2, 3, 4), $border-radii: ("xs": 0.125rem, "sm": 0.25rem, "md": 0.375rem, "lg": 0.5rem, "full": 9999px, "none": 0));A missing key is reported at compile time, for example Base styles need the key xs in $border-radii. Configured keys: sm, lg, full. Add xs back to $border-radii.
Errors
Section titled “Errors”| Input | Error |
|---|---|
border(3) |
border: 3 is not a configured key. Valid keys: 0, 1, 2, 4, 8. Write a unit for a custom value (3px, 3rem). |
border(-1) |
border: negative key -1 is not allowed here. Negative keys work for margin, inset, offsets, translate and space only. |
border(1, wavy) |
Unknown border style: wavy. Use one of solid, dashed, dotted, double, none, a CSS-wide keyword (inherit, initial, unset, revert, revert-layer) or var(). |
border-color(nope) |
border-color(nope): unknown colour. Use a role (brand, success, danger, warning, info), a palette name (gray, red, blue, green, yellow, purple, pink), a theme word (regular, strong, control, control-hover, focus), a hex colour, a CSS colour name, a colour function (rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(), color-mix(), light-dark()), a keyword (currentcolor, inherit, initial, unset, revert, revert-layer) or var(). |
border-color(danger, 450) |
border-color(danger, 450): invalid shade. Valid shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. |
rounded(4) |
rounded: 4 is not a configured key. Valid keys: xs, sm, md, lg, xl, 2xl, full, none. Write a unit for a custom value (4px, 4rem). |
rounded(-4px) |
rounded: negative value -4px is not allowed here. Negative values work for margin, inset, offsets, translate and space only. |
CSS variables
Section titled “CSS variables”| Variable | Description |
|---|---|
--nu-border-width-{key} |
One token per entry of $border-widths. Fixed across themes. |
--nu-radius-{key} |
One token per key of $border-radii. Fixed across themes. |
--nu-border-regular, --nu-border-strong, --nu-border-control, --nu-border-control-hover |
Theme border colours. Change with the theme. |
--nu-border-focus, --nu-border-focus-width, --nu-border-focus-offset |
Focus ring colour, width and offset, applied through outline. |
--nu-border-style is an internal property set by the border utilities, not a token; token() does not accept it.
Class reference
Section titled “Class reference”Generated from the compiled core build. Responsive variants are not listed.
Width (54 rules)
| Selector | Declarations | Default value |
|---|---|---|
.border | border-width: var(--nu-border-width-1)border-style: var(--nu-border-style)border-color: var(--nu-border-regular)--nu-border-style: solid | 1pxvar(--nu-border-style)#d3d5d9solid |
.border-t | border-top-width: var(--nu-border-width-1)border-top-style: var(--nu-border-style)border-top-color: var(--nu-border-regular)--nu-border-style: solid | 1pxvar(--nu-border-style)#d3d5d9solid |
.border-r | border-right-width: var(--nu-border-width-1)border-right-style: var(--nu-border-style)border-right-color: var(--nu-border-regular)--nu-border-style: solid | 1pxvar(--nu-border-style)#d3d5d9solid |
.border-b | border-bottom-width: var(--nu-border-width-1)border-bottom-style: var(--nu-border-style)border-bottom-color: var(--nu-border-regular)--nu-border-style: solid | 1pxvar(--nu-border-style)#d3d5d9solid |
.border-l | border-left-width: var(--nu-border-width-1)border-left-style: var(--nu-border-style)border-left-color: var(--nu-border-regular)--nu-border-style: solid | 1pxvar(--nu-border-style)#d3d5d9solid |
.border-s | border-inline-start-width: var(--nu-border-width-1)border-inline-start-style: var(--nu-border-style)border-inline-start-color: var(--nu-border-regular)--nu-border-style: solid | 1pxvar(--nu-border-style)#d3d5d9solid |
.border-e | border-inline-end-width: var(--nu-border-width-1)border-inline-end-style: var(--nu-border-style)border-inline-end-color: var(--nu-border-regular)--nu-border-style: solid | 1pxvar(--nu-border-style)#d3d5d9solid |
.border-x | border-left-width: var(--nu-border-width-1)border-right-width: var(--nu-border-width-1)border-left-style: var(--nu-border-style)border-left-color: var(--nu-border-regular)border-right-style: var(--nu-border-style)border-right-color: var(--nu-border-regular)--nu-border-style: solid | 1px1pxvar(--nu-border-style)#d3d5d9var(--nu-border-style)#d3d5d9solid |
.border-y | border-top-width: var(--nu-border-width-1)border-bottom-width: var(--nu-border-width-1)border-top-style: var(--nu-border-style)border-top-color: var(--nu-border-regular)border-bottom-style: var(--nu-border-style)border-bottom-color: var(--nu-border-regular)--nu-border-style: solid | 1px1pxvar(--nu-border-style)#d3d5d9var(--nu-border-style)#d3d5d9solid |
.border-0 | border-width: var(--nu-border-width-0) | 0px |
.border-t-0 | border-top-width: var(--nu-border-width-0) | 0px |
.border-r-0 | border-right-width: var(--nu-border-width-0) | 0px |
.border-b-0 | border-bottom-width: var(--nu-border-width-0) | 0px |
.border-l-0 | border-left-width: var(--nu-border-width-0) | 0px |
.border-s-0 | border-inline-start-width: var(--nu-border-width-0) | 0px |
.border-e-0 | border-inline-end-width: var(--nu-border-width-0) | 0px |
.border-x-0 | border-left-width: var(--nu-border-width-0)border-right-width: var(--nu-border-width-0) | 0px0px |
.border-y-0 | border-top-width: var(--nu-border-width-0)border-bottom-width: var(--nu-border-width-0) | 0px0px |
.border-1 | border-width: var(--nu-border-width-1)border-style: var(--nu-border-style)border-color: var(--nu-border-regular)--nu-border-style: solid | 1pxvar(--nu-border-style)#d3d5d9solid |
.border-t-1 | border-top-width: var(--nu-border-width-1)border-top-style: var(--nu-border-style)border-top-color: var(--nu-border-regular)--nu-border-style: solid | 1pxvar(--nu-border-style)#d3d5d9solid |
.border-r-1 | border-right-width: var(--nu-border-width-1)border-right-style: var(--nu-border-style)border-right-color: var(--nu-border-regular)--nu-border-style: solid | 1pxvar(--nu-border-style)#d3d5d9solid |
.border-b-1 | border-bottom-width: var(--nu-border-width-1)border-bottom-style: var(--nu-border-style)border-bottom-color: var(--nu-border-regular)--nu-border-style: solid | 1pxvar(--nu-border-style)#d3d5d9solid |
.border-l-1 | border-left-width: var(--nu-border-width-1)border-left-style: var(--nu-border-style)border-left-color: var(--nu-border-regular)--nu-border-style: solid | 1pxvar(--nu-border-style)#d3d5d9solid |
.border-s-1 | border-inline-start-width: var(--nu-border-width-1)border-inline-start-style: var(--nu-border-style)border-inline-start-color: var(--nu-border-regular)--nu-border-style: solid | 1pxvar(--nu-border-style)#d3d5d9solid |
.border-e-1 | border-inline-end-width: var(--nu-border-width-1)border-inline-end-style: var(--nu-border-style)border-inline-end-color: var(--nu-border-regular)--nu-border-style: solid | 1pxvar(--nu-border-style)#d3d5d9solid |
.border-x-1 | border-left-width: var(--nu-border-width-1)border-right-width: var(--nu-border-width-1)border-left-style: var(--nu-border-style)border-left-color: var(--nu-border-regular)border-right-style: var(--nu-border-style)border-right-color: var(--nu-border-regular)--nu-border-style: solid | 1px1pxvar(--nu-border-style)#d3d5d9var(--nu-border-style)#d3d5d9solid |
.border-y-1 | border-top-width: var(--nu-border-width-1)border-bottom-width: var(--nu-border-width-1)border-top-style: var(--nu-border-style)border-top-color: var(--nu-border-regular)border-bottom-style: var(--nu-border-style)border-bottom-color: var(--nu-border-regular)--nu-border-style: solid | 1px1pxvar(--nu-border-style)#d3d5d9var(--nu-border-style)#d3d5d9solid |
.border-2 | border-width: var(--nu-border-width-2)border-style: var(--nu-border-style)border-color: var(--nu-border-regular)--nu-border-style: solid | 2pxvar(--nu-border-style)#d3d5d9solid |
.border-t-2 | border-top-width: var(--nu-border-width-2)border-top-style: var(--nu-border-style)border-top-color: var(--nu-border-regular)--nu-border-style: solid | 2pxvar(--nu-border-style)#d3d5d9solid |
.border-r-2 | border-right-width: var(--nu-border-width-2)border-right-style: var(--nu-border-style)border-right-color: var(--nu-border-regular)--nu-border-style: solid | 2pxvar(--nu-border-style)#d3d5d9solid |
.border-b-2 | border-bottom-width: var(--nu-border-width-2)border-bottom-style: var(--nu-border-style)border-bottom-color: var(--nu-border-regular)--nu-border-style: solid | 2pxvar(--nu-border-style)#d3d5d9solid |
.border-l-2 | border-left-width: var(--nu-border-width-2)border-left-style: var(--nu-border-style)border-left-color: var(--nu-border-regular)--nu-border-style: solid | 2pxvar(--nu-border-style)#d3d5d9solid |
.border-s-2 | border-inline-start-width: var(--nu-border-width-2)border-inline-start-style: var(--nu-border-style)border-inline-start-color: var(--nu-border-regular)--nu-border-style: solid | 2pxvar(--nu-border-style)#d3d5d9solid |
.border-e-2 | border-inline-end-width: var(--nu-border-width-2)border-inline-end-style: var(--nu-border-style)border-inline-end-color: var(--nu-border-regular)--nu-border-style: solid | 2pxvar(--nu-border-style)#d3d5d9solid |
.border-x-2 | border-left-width: var(--nu-border-width-2)border-right-width: var(--nu-border-width-2)border-left-style: var(--nu-border-style)border-left-color: var(--nu-border-regular)border-right-style: var(--nu-border-style)border-right-color: var(--nu-border-regular)--nu-border-style: solid | 2px2pxvar(--nu-border-style)#d3d5d9var(--nu-border-style)#d3d5d9solid |
.border-y-2 | border-top-width: var(--nu-border-width-2)border-bottom-width: var(--nu-border-width-2)border-top-style: var(--nu-border-style)border-top-color: var(--nu-border-regular)border-bottom-style: var(--nu-border-style)border-bottom-color: var(--nu-border-regular)--nu-border-style: solid | 2px2pxvar(--nu-border-style)#d3d5d9var(--nu-border-style)#d3d5d9solid |
.border-4 | border-width: var(--nu-border-width-4)border-style: var(--nu-border-style)border-color: var(--nu-border-regular)--nu-border-style: solid | 4pxvar(--nu-border-style)#d3d5d9solid |
.border-t-4 | border-top-width: var(--nu-border-width-4)border-top-style: var(--nu-border-style)border-top-color: var(--nu-border-regular)--nu-border-style: solid | 4pxvar(--nu-border-style)#d3d5d9solid |
.border-r-4 | border-right-width: var(--nu-border-width-4)border-right-style: var(--nu-border-style)border-right-color: var(--nu-border-regular)--nu-border-style: solid | 4pxvar(--nu-border-style)#d3d5d9solid |
.border-b-4 | border-bottom-width: var(--nu-border-width-4)border-bottom-style: var(--nu-border-style)border-bottom-color: var(--nu-border-regular)--nu-border-style: solid | 4pxvar(--nu-border-style)#d3d5d9solid |
.border-l-4 | border-left-width: var(--nu-border-width-4)border-left-style: var(--nu-border-style)border-left-color: var(--nu-border-regular)--nu-border-style: solid | 4pxvar(--nu-border-style)#d3d5d9solid |
.border-s-4 | border-inline-start-width: var(--nu-border-width-4)border-inline-start-style: var(--nu-border-style)border-inline-start-color: var(--nu-border-regular)--nu-border-style: solid | 4pxvar(--nu-border-style)#d3d5d9solid |
.border-e-4 | border-inline-end-width: var(--nu-border-width-4)border-inline-end-style: var(--nu-border-style)border-inline-end-color: var(--nu-border-regular)--nu-border-style: solid | 4pxvar(--nu-border-style)#d3d5d9solid |
.border-x-4 | border-left-width: var(--nu-border-width-4)border-right-width: var(--nu-border-width-4)border-left-style: var(--nu-border-style)border-left-color: var(--nu-border-regular)border-right-style: var(--nu-border-style)border-right-color: var(--nu-border-regular)--nu-border-style: solid | 4px4pxvar(--nu-border-style)#d3d5d9var(--nu-border-style)#d3d5d9solid |
.border-y-4 | border-top-width: var(--nu-border-width-4)border-bottom-width: var(--nu-border-width-4)border-top-style: var(--nu-border-style)border-top-color: var(--nu-border-regular)border-bottom-style: var(--nu-border-style)border-bottom-color: var(--nu-border-regular)--nu-border-style: solid | 4px4pxvar(--nu-border-style)#d3d5d9var(--nu-border-style)#d3d5d9solid |
.border-8 | border-width: var(--nu-border-width-8)border-style: var(--nu-border-style)border-color: var(--nu-border-regular)--nu-border-style: solid | 8pxvar(--nu-border-style)#d3d5d9solid |
.border-t-8 | border-top-width: var(--nu-border-width-8)border-top-style: var(--nu-border-style)border-top-color: var(--nu-border-regular)--nu-border-style: solid | 8pxvar(--nu-border-style)#d3d5d9solid |
.border-r-8 | border-right-width: var(--nu-border-width-8)border-right-style: var(--nu-border-style)border-right-color: var(--nu-border-regular)--nu-border-style: solid | 8pxvar(--nu-border-style)#d3d5d9solid |
.border-b-8 | border-bottom-width: var(--nu-border-width-8)border-bottom-style: var(--nu-border-style)border-bottom-color: var(--nu-border-regular)--nu-border-style: solid | 8pxvar(--nu-border-style)#d3d5d9solid |
.border-l-8 | border-left-width: var(--nu-border-width-8)border-left-style: var(--nu-border-style)border-left-color: var(--nu-border-regular)--nu-border-style: solid | 8pxvar(--nu-border-style)#d3d5d9solid |
.border-s-8 | border-inline-start-width: var(--nu-border-width-8)border-inline-start-style: var(--nu-border-style)border-inline-start-color: var(--nu-border-regular)--nu-border-style: solid | 8pxvar(--nu-border-style)#d3d5d9solid |
.border-e-8 | border-inline-end-width: var(--nu-border-width-8)border-inline-end-style: var(--nu-border-style)border-inline-end-color: var(--nu-border-regular)--nu-border-style: solid | 8pxvar(--nu-border-style)#d3d5d9solid |
.border-x-8 | border-left-width: var(--nu-border-width-8)border-right-width: var(--nu-border-width-8)border-left-style: var(--nu-border-style)border-left-color: var(--nu-border-regular)border-right-style: var(--nu-border-style)border-right-color: var(--nu-border-regular)--nu-border-style: solid | 8px8pxvar(--nu-border-style)#d3d5d9var(--nu-border-style)#d3d5d9solid |
.border-y-8 | border-top-width: var(--nu-border-width-8)border-bottom-width: var(--nu-border-width-8)border-top-style: var(--nu-border-style)border-top-color: var(--nu-border-regular)border-bottom-style: var(--nu-border-style)border-bottom-color: var(--nu-border-regular)--nu-border-style: solid | 8px8pxvar(--nu-border-style)#d3d5d9var(--nu-border-style)#d3d5d9solid |
Style (5 rules)
| Selector | Declarations | Default value |
|---|---|---|
.border-solid,
.hover:border-solid:hover,
.active:border-solid:active,
.focus:border-solid:focus,
.group:hover .group-hover:border-solid | --nu-border-style: solid | solid |
.border-dashed,
.hover:border-dashed:hover,
.active:border-dashed:active,
.focus:border-dashed:focus,
.group:hover .group-hover:border-dashed | --nu-border-style: dashed | dashed |
.border-dotted,
.hover:border-dotted:hover,
.active:border-dotted:active,
.focus:border-dotted:focus,
.group:hover .group-hover:border-dotted | --nu-border-style: dotted | dotted |
.border-double,
.hover:border-double:hover,
.active:border-double:active,
.focus:border-double:focus,
.group:hover .group-hover:border-double | --nu-border-style: double | double |
.border-none,
.hover:border-none:hover,
.active:border-none:active,
.focus:border-none:focus,
.group:hover .group-hover:border-none | --nu-border-style: none | none |
Colour (20 rules)
| Selector | Declarations | Default value |
|---|---|---|
.border-brand,
.hover:border-brand:hover,
.group:hover .group-hover:border-brand | border-color: var(--nu-brand) | var(--nu-brand-700) |
.border-success,
.hover:border-success:hover,
.group:hover .group-hover:border-success | border-color: var(--nu-success) | var(--nu-success-700) |
.border-danger,
.hover:border-danger:hover,
.group:hover .group-hover:border-danger | border-color: var(--nu-danger) | var(--nu-danger-700) |
.border-warning,
.hover:border-warning:hover,
.group:hover .group-hover:border-warning | border-color: var(--nu-warning) | var(--nu-warning-500) |
.border-info,
.hover:border-info:hover,
.group:hover .group-hover:border-info | border-color: var(--nu-info) | var(--nu-info-700) |
.border-gray,
.hover:border-gray:hover,
.group:hover .group-hover:border-gray | border-color: var(--nu-gray-500) | #6b7280 |
.border-red,
.hover:border-red:hover,
.group:hover .group-hover:border-red | border-color: var(--nu-red-500) | #ef4444 |
.border-blue,
.hover:border-blue:hover,
.group:hover .group-hover:border-blue | border-color: var(--nu-blue-500) | #3b82f6 |
.border-green,
.hover:border-green:hover,
.group:hover .group-hover:border-green | border-color: var(--nu-green-500) | #22c55e |
.border-yellow,
.hover:border-yellow:hover,
.group:hover .group-hover:border-yellow | border-color: var(--nu-yellow-500) | #eab308 |
.border-purple,
.hover:border-purple:hover,
.group:hover .group-hover:border-purple | border-color: var(--nu-purple-500) | #a855f7 |
.border-pink,
.hover:border-pink:hover,
.group:hover .group-hover:border-pink | border-color: var(--nu-pink-500) | #ec4899 |
.border-error,
.hover:border-error:hover,
.group:hover .group-hover:border-error | border-color: var(--nu-error) | var(--nu-danger) |
.border-black,
.hover:border-black:hover,
.group:hover .group-hover:border-black | border-color: var(--nu-black) | #000 |
.border-white,
.hover:border-white:hover,
.group:hover .group-hover:border-white | border-color: var(--nu-white) | #fff |
.border-transparent,
.hover:border-transparent:hover,
.group:hover .group-hover:border-transparent | border-color: var(--nu-transparent) | transparent |
.border-regular,
.hover:border-regular:hover,
.group:hover .group-hover:border-regular | border-color: var(--nu-border-regular) | #d3d5d9 |
.border-strong,
.hover:border-strong:hover,
.group:hover .group-hover:border-strong | border-color: var(--nu-border-strong) | var(--nu-gray-400) |
.border-control,
.hover:border-control:hover,
.group:hover .group-hover:border-control | border-color: var(--nu-border-control) | var(--nu-gray-500) |
.border-control-hover,
.hover:border-control-hover:hover,
.group:hover .group-hover:border-control-hover | border-color: var(--nu-border-control-hover) | var(--nu-gray-600) |
Colour shades (132 rules)
| Selector | Declarations | Default value |
|---|---|---|
.border-brand-50,
.hover:border-brand-50:hover,
.group:hover .group-hover:border-brand-50 | border-color: var(--nu-brand-50) | #ebf3ff |
.border-brand-100,
.hover:border-brand-100:hover,
.group:hover .group-hover:border-brand-100 | border-color: var(--nu-brand-100) | #dbeaff |
.border-brand-200,
.hover:border-brand-200:hover,
.group:hover .group-hover:border-brand-200 | border-color: var(--nu-brand-200) | #bad7ff |
.border-brand-300,
.hover:border-brand-300:hover,
.group:hover .group-hover:border-brand-300 | border-color: var(--nu-brand-300) | #91beff |
.border-brand-400,
.hover:border-brand-400:hover,
.group:hover .group-hover:border-brand-400 | border-color: var(--nu-brand-400) | #5ca0ff |
.border-brand-500,
.hover:border-brand-500:hover,
.group:hover .group-hover:border-brand-500 | border-color: var(--nu-brand-500) | #007bff |
.border-brand-600,
.hover:border-brand-600:hover,
.group:hover .group-hover:border-brand-600 | border-color: var(--nu-brand-600) | #006be0 |
.border-brand-700,
.hover:border-brand-700:hover,
.group:hover .group-hover:border-brand-700 | border-color: var(--nu-brand-700) | #0058bb |
.border-brand-800,
.hover:border-brand-800:hover,
.group:hover .group-hover:border-brand-800 | border-color: var(--nu-brand-800) | #004494 |
.border-brand-900,
.hover:border-brand-900:hover,
.group:hover .group-hover:border-brand-900 | border-color: var(--nu-brand-900) | #003270 |
.border-brand-950,
.hover:border-brand-950:hover,
.group:hover .group-hover:border-brand-950 | border-color: var(--nu-brand-950) | #002352 |
.border-success-50,
.hover:border-success-50:hover,
.group:hover .group-hover:border-success-50 | border-color: var(--nu-success-50) | #e5fae6 |
.border-success-100,
.hover:border-success-100:hover,
.group:hover .group-hover:border-success-100 | border-color: var(--nu-success-100) | #cef7d1 |
.border-success-200,
.hover:border-success-200:hover,
.group:hover .group-hover:border-success-200 | border-color: var(--nu-success-200) | #a8ecae |
.border-success-300,
.hover:border-success-300:hover,
.group:hover .group-hover:border-success-300 | border-color: var(--nu-success-300) | #7fdb89 |
.border-success-400,
.hover:border-success-400:hover,
.group:hover .group-hover:border-success-400 | border-color: var(--nu-success-400) | #54c365 |
.border-success-500,
.hover:border-success-500:hover,
.group:hover .group-hover:border-success-500 | border-color: var(--nu-success-500) | #28a745 |
.border-success-600,
.hover:border-success-600:hover,
.group:hover .group-hover:border-success-600 | border-color: var(--nu-success-600) | #059333 |
.border-success-700,
.hover:border-success-700:hover,
.group:hover .group-hover:border-success-700 | border-color: var(--nu-success-700) | #007a28 |
.border-success-800,
.hover:border-success-800:hover,
.group:hover .group-hover:border-success-800 | border-color: var(--nu-success-800) | #005e1d |
.border-success-900,
.hover:border-success-900:hover,
.group:hover .group-hover:border-success-900 | border-color: var(--nu-success-900) | #004513 |
.border-success-950,
.hover:border-success-950:hover,
.group:hover .group-hover:border-success-950 | border-color: var(--nu-success-950) | #00300b |
.border-danger-50,
.hover:border-danger-50:hover,
.group:hover .group-hover:border-danger-50 | border-color: var(--nu-danger-50) | #ffeeed |
.border-danger-100,
.hover:border-danger-100:hover,
.group:hover .group-hover:border-danger-100 | border-color: var(--nu-danger-100) | #ffdfde |
.border-danger-200,
.hover:border-danger-200:hover,
.group:hover .group-hover:border-danger-200 | border-color: var(--nu-danger-200) | #ffc1bf |
.border-danger-300,
.hover:border-danger-300:hover,
.group:hover .group-hover:border-danger-300 | border-color: var(--nu-danger-300) | #ff9997 |
.border-danger-400,
.hover:border-danger-400:hover,
.group:hover .group-hover:border-danger-400 | border-color: var(--nu-danger-400) | #fd6066 |
.border-danger-500,
.hover:border-danger-500:hover,
.group:hover .group-hover:border-danger-500 | border-color: var(--nu-danger-500) | #dc3545 |
.border-danger-600,
.hover:border-danger-600:hover,
.group:hover .group-hover:border-danger-600 | border-color: var(--nu-danger-600) | #c72037 |
.border-danger-700,
.hover:border-danger-700:hover,
.group:hover .group-hover:border-danger-700 | border-color: var(--nu-danger-700) | #ab0728 |
.border-danger-800,
.hover:border-danger-800:hover,
.group:hover .group-hover:border-danger-800 | border-color: var(--nu-danger-800) | #88001c |
.border-danger-900,
.hover:border-danger-900:hover,
.group:hover .group-hover:border-danger-900 | border-color: var(--nu-danger-900) | #670013 |
.border-danger-950,
.hover:border-danger-950:hover,
.group:hover .group-hover:border-danger-950 | border-color: var(--nu-danger-950) | #4c000b |
.border-warning-50,
.hover:border-warning-50:hover,
.group:hover .group-hover:border-warning-50 | border-color: var(--nu-warning-50) | #fff6e5 |
.border-warning-100,
.hover:border-warning-100:hover,
.group:hover .group-hover:border-warning-100 | border-color: var(--nu-warning-100) | #fff2d8 |
.border-warning-200,
.hover:border-warning-200:hover,
.group:hover .group-hover:border-warning-200 | border-color: var(--nu-warning-200) | #ffeabe |
.border-warning-300,
.hover:border-warning-300:hover,
.group:hover .group-hover:border-warning-300 | border-color: var(--nu-warning-300) | #ffdf9c |
.border-warning-400,
.hover:border-warning-400:hover,
.group:hover .group-hover:border-warning-400 | border-color: var(--nu-warning-400) | #ffd16c |
.border-warning-500,
.hover:border-warning-500:hover,
.group:hover .group-hover:border-warning-500 | border-color: var(--nu-warning-500) | #ffc107 |
.border-warning-600,
.hover:border-warning-600:hover,
.group:hover .group-hover:border-warning-600 | border-color: var(--nu-warning-600) | #dca600 |
.border-warning-700,
.hover:border-warning-700:hover,
.group:hover .group-hover:border-warning-700 | border-color: var(--nu-warning-700) | #b28600 |
.border-warning-800,
.hover:border-warning-800:hover,
.group:hover .group-hover:border-warning-800 | border-color: var(--nu-warning-800) | #866300 |
.border-warning-900,
.hover:border-warning-900:hover,
.group:hover .group-hover:border-warning-900 | border-color: var(--nu-warning-900) | #5e4500 |
.border-warning-950,
.hover:border-warning-950:hover,
.group:hover .group-hover:border-warning-950 | border-color: var(--nu-warning-950) | #3d2b00 |
.border-info-50,
.hover:border-info-50:hover,
.group:hover .group-hover:border-info-50 | border-color: var(--nu-info-50) | #e4f8fc |
.border-info-100,
.hover:border-info-100:hover,
.group:hover .group-hover:border-info-100 | border-color: var(--nu-info-100) | #ccf3fb |
.border-info-200,
.hover:border-info-200:hover,
.group:hover .group-hover:border-info-200 | border-color: var(--nu-info-200) | #a4e6f4 |
.border-info-300,
.hover:border-info-300:hover,
.group:hover .group-hover:border-info-300 | border-color: var(--nu-info-300) | #79d4e6 |
.border-info-400,
.hover:border-info-400:hover,
.group:hover .group-hover:border-info-400 | border-color: var(--nu-info-400) | #4cbdd2 |
.border-info-500,
.hover:border-info-500:hover,
.group:hover .group-hover:border-info-500 | border-color: var(--nu-info-500) | #17a2b8 |
.border-info-600,
.hover:border-info-600:hover,
.group:hover .group-hover:border-info-600 | border-color: var(--nu-info-600) | #008da1 |
.border-info-700,
.hover:border-info-700:hover,
.group:hover .group-hover:border-info-700 | border-color: var(--nu-info-700) | #007485 |
.border-info-800,
.hover:border-info-800:hover,
.group:hover .group-hover:border-info-800 | border-color: var(--nu-info-800) | #005a67 |
.border-info-900,
.hover:border-info-900:hover,
.group:hover .group-hover:border-info-900 | border-color: var(--nu-info-900) | #00414c |
.border-info-950,
.hover:border-info-950:hover,
.group:hover .group-hover:border-info-950 | border-color: var(--nu-info-950) | #002d35 |
.border-gray-50,
.hover:border-gray-50:hover,
.group:hover .group-hover:border-gray-50 | border-color: var(--nu-gray-50) | #f0f1f5 |
.border-gray-100,
.hover:border-gray-100:hover,
.group:hover .group-hover:border-gray-100 | border-color: var(--nu-gray-100) | #e3e6ec |
.border-gray-200,
.hover:border-gray-200:hover,
.group:hover .group-hover:border-gray-200 | border-color: var(--nu-gray-200) | #cacfd9 |
.border-gray-300,
.hover:border-gray-300:hover,
.group:hover .group-hover:border-gray-300 | border-color: var(--nu-gray-300) | #adb4c0 |
.border-gray-400,
.hover:border-gray-400:hover,
.group:hover .group-hover:border-gray-400 | border-color: var(--nu-gray-400) | #8d94a1 |
.border-gray-500,
.hover:border-gray-500:hover,
.group:hover .group-hover:border-gray-500 | border-color: var(--nu-gray-500) | #6b7280 |
.border-gray-600,
.hover:border-gray-600:hover,
.group:hover .group-hover:border-gray-600 | border-color: var(--nu-gray-600) | #5d6471 |
.border-gray-700,
.hover:border-gray-700:hover,
.group:hover .group-hover:border-gray-700 | border-color: var(--nu-gray-700) | #4d535f |
.border-gray-800,
.hover:border-gray-800:hover,
.group:hover .group-hover:border-gray-800 | border-color: var(--nu-gray-800) | #3c414c |
.border-gray-900,
.hover:border-gray-900:hover,
.group:hover .group-hover:border-gray-900 | border-color: var(--nu-gray-900) | #2d3139 |
.border-gray-950,
.hover:border-gray-950:hover,
.group:hover .group-hover:border-gray-950 | border-color: var(--nu-gray-950) | #20232a |
.border-red-50,
.hover:border-red-50:hover,
.group:hover .group-hover:border-red-50 | border-color: var(--nu-red-50) | #ffefed |
.border-red-100,
.hover:border-red-100:hover,
.group:hover .group-hover:border-red-100 | border-color: var(--nu-red-100) | #ffe2df |
.border-red-200,
.hover:border-red-200:hover,
.group:hover .group-hover:border-red-200 | border-color: var(--nu-red-200) | #ffc8c3 |
.border-red-300,
.hover:border-red-300:hover,
.group:hover .group-hover:border-red-300 | border-color: var(--nu-red-300) | #ffa69e |
.border-red-400,
.hover:border-red-400:hover,
.group:hover .group-hover:border-red-400 | border-color: var(--nu-red-400) | #ff766f |
.border-red-500,
.hover:border-red-500:hover,
.group:hover .group-hover:border-red-500 | border-color: var(--nu-red-500) | #ef4444 |
.border-red-600,
.hover:border-red-600:hover,
.group:hover .group-hover:border-red-600 | border-color: var(--nu-red-600) | #d72f33 |
.border-red-700,
.hover:border-red-700:hover,
.group:hover .group-hover:border-red-700 | border-color: var(--nu-red-700) | #b81822 |
.border-red-800,
.hover:border-red-800:hover,
.group:hover .group-hover:border-red-800 | border-color: var(--nu-red-800) | #930013 |
.border-red-900,
.hover:border-red-900:hover,
.group:hover .group-hover:border-red-900 | border-color: var(--nu-red-900) | #6e000c |
.border-red-950,
.hover:border-red-950:hover,
.group:hover .group-hover:border-red-950 | border-color: var(--nu-red-950) | #4f0006 |
.border-blue-50,
.hover:border-blue-50:hover,
.group:hover .group-hover:border-blue-50 | border-color: var(--nu-blue-50) | #ecf3ff |
.border-blue-100,
.hover:border-blue-100:hover,
.group:hover .group-hover:border-blue-100 | border-color: var(--nu-blue-100) | #ddeaff |
.border-blue-200,
.hover:border-blue-200:hover,
.group:hover .group-hover:border-blue-200 | border-color: var(--nu-blue-200) | #bfd8ff |
.border-blue-300,
.hover:border-blue-300:hover,
.group:hover .group-hover:border-blue-300 | border-color: var(--nu-blue-300) | #9ac0ff |
.border-blue-400,
.hover:border-blue-400:hover,
.group:hover .group-hover:border-blue-400 | border-color: var(--nu-blue-400) | #6ba3ff |
.border-blue-500,
.hover:border-blue-500:hover,
.group:hover .group-hover:border-blue-500 | border-color: var(--nu-blue-500) | #3b82f6 |
.border-blue-600,
.hover:border-blue-600:hover,
.group:hover .group-hover:border-blue-600 | border-color: var(--nu-blue-600) | #2a70df |
.border-blue-700,
.hover:border-blue-700:hover,
.group:hover .group-hover:border-blue-700 | border-color: var(--nu-blue-700) | #1a5ac1 |
.border-blue-800,
.hover:border-blue-800:hover,
.group:hover .group-hover:border-blue-800 | border-color: var(--nu-blue-800) | #0b449c |
.border-blue-900,
.hover:border-blue-900:hover,
.group:hover .group-hover:border-blue-900 | border-color: var(--nu-blue-900) | #023179 |
.border-blue-950,
.hover:border-blue-950:hover,
.group:hover .group-hover:border-blue-950 | border-color: var(--nu-blue-950) | #012158 |
.border-green-50,
.hover:border-green-50:hover,
.group:hover .group-hover:border-green-50 | border-color: var(--nu-green-50) | #e4fde7 |
.border-green-100,
.hover:border-green-100:hover,
.group:hover .group-hover:border-green-100 | border-color: var(--nu-green-100) | #ccfcd4 |
.border-green-200,
.hover:border-green-200:hover,
.group:hover .group-hover:border-green-200 | border-color: var(--nu-green-200) | #a6f7b6 |
.border-green-300,
.hover:border-green-300:hover,
.group:hover .group-hover:border-green-300 | border-color: var(--nu-green-300) | #7ceb96 |
.border-green-400,
.hover:border-green-400:hover,
.group:hover .group-hover:border-green-400 | border-color: var(--nu-green-400) | #50da78 |
.border-green-500,
.hover:border-green-500:hover,
.group:hover .group-hover:border-green-500 | border-color: var(--nu-green-500) | #22c55e |
.border-green-600,
.hover:border-green-600:hover,
.group:hover .group-hover:border-green-600 | border-color: var(--nu-green-600) | #00ac4d |
.border-green-700,
.hover:border-green-700:hover,
.group:hover .group-hover:border-green-700 | border-color: var(--nu-green-700) | #008d3d |
.border-green-800,
.hover:border-green-800:hover,
.group:hover .group-hover:border-green-800 | border-color: var(--nu-green-800) | #006b2d |
.border-green-900,
.hover:border-green-900:hover,
.group:hover .group-hover:border-green-900 | border-color: var(--nu-green-900) | #004d1e |
.border-green-950,
.hover:border-green-950:hover,
.group:hover .group-hover:border-green-950 | border-color: var(--nu-green-950) | #003412 |
.border-yellow-50,
.hover:border-yellow-50:hover,
.group:hover .group-hover:border-yellow-50 | border-color: var(--nu-yellow-50) | #fff5e1 |
.border-yellow-100,
.hover:border-yellow-100:hover,
.group:hover .group-hover:border-yellow-100 | border-color: var(--nu-yellow-100) | #fff0cf |
.border-yellow-200,
.hover:border-yellow-200:hover,
.group:hover .group-hover:border-yellow-200 | border-color: var(--nu-yellow-200) | #ffe4aa |
.border-yellow-300,
.hover:border-yellow-300:hover,
.group:hover .group-hover:border-yellow-300 | border-color: var(--nu-yellow-300) | #ffd576 |
.border-yellow-400,
.hover:border-yellow-400:hover,
.group:hover .group-hover:border-yellow-400 | border-color: var(--nu-yellow-400) | #f8c43f |
.border-yellow-500,
.hover:border-yellow-500:hover,
.group:hover .group-hover:border-yellow-500 | border-color: var(--nu-yellow-500) | #eab308 |
.border-yellow-600,
.hover:border-yellow-600:hover,
.group:hover .group-hover:border-yellow-600 | border-color: var(--nu-yellow-600) | #ca9a00 |
.border-yellow-700,
.hover:border-yellow-700:hover,
.group:hover .group-hover:border-yellow-700 | border-color: var(--nu-yellow-700) | #a57d00 |
.border-yellow-800,
.hover:border-yellow-800:hover,
.group:hover .group-hover:border-yellow-800 | border-color: var(--nu-yellow-800) | #7c5d00 |
.border-yellow-900,
.hover:border-yellow-900:hover,
.group:hover .group-hover:border-yellow-900 | border-color: var(--nu-yellow-900) | #584100 |
.border-yellow-950,
.hover:border-yellow-950:hover,
.group:hover .group-hover:border-yellow-950 | border-color: var(--nu-yellow-950) | #3a2a00 |
.border-purple-50,
.hover:border-purple-50:hover,
.group:hover .group-hover:border-purple-50 | border-color: var(--nu-purple-50) | #f6f0ff |
.border-purple-100,
.hover:border-purple-100:hover,
.group:hover .group-hover:border-purple-100 | border-color: var(--nu-purple-100) | #efe4ff |
.border-purple-200,
.hover:border-purple-200:hover,
.group:hover .group-hover:border-purple-200 | border-color: var(--nu-purple-200) | #e1cbff |
.border-purple-300,
.hover:border-purple-300:hover,
.group:hover .group-hover:border-purple-300 | border-color: var(--nu-purple-300) | #d0acff |
.border-purple-400,
.hover:border-purple-400:hover,
.group:hover .group-hover:border-purple-400 | border-color: var(--nu-purple-400) | #bd83ff |
.border-purple-500,
.hover:border-purple-500:hover,
.group:hover .group-hover:border-purple-500 | border-color: var(--nu-purple-500) | #a855f7 |
.border-purple-600,
.hover:border-purple-600:hover,
.group:hover .group-hover:border-purple-600 | border-color: var(--nu-purple-600) | #9542e0 |
.border-purple-700,
.hover:border-purple-700:hover,
.group:hover .group-hover:border-purple-700 | border-color: var(--nu-purple-700) | #7e2ec1 |
.border-purple-800,
.hover:border-purple-800:hover,
.group:hover .group-hover:border-purple-800 | border-color: var(--nu-purple-800) | #631b9c |
.border-purple-900,
.hover:border-purple-900:hover,
.group:hover .group-hover:border-purple-900 | border-color: var(--nu-purple-900) | #4b0d79 |
.border-purple-950,
.hover:border-purple-950:hover,
.group:hover .group-hover:border-purple-950 | border-color: var(--nu-purple-950) | #350658 |
.border-pink-50,
.hover:border-pink-50:hover,
.group:hover .group-hover:border-pink-50 | border-color: var(--nu-pink-50) | #ffeef4 |
.border-pink-100,
.hover:border-pink-100:hover,
.group:hover .group-hover:border-pink-100 | border-color: var(--nu-pink-100) | #ffe2ec |
.border-pink-200,
.hover:border-pink-200:hover,
.group:hover .group-hover:border-pink-200 | border-color: var(--nu-pink-200) | #ffc8dc |
.border-pink-300,
.hover:border-pink-300:hover,
.group:hover .group-hover:border-pink-300 | border-color: var(--nu-pink-300) | #ffa5c9 |
.border-pink-400,
.hover:border-pink-400:hover,
.group:hover .group-hover:border-pink-400 | border-color: var(--nu-pink-400) | #ff74b2 |
.border-pink-500,
.hover:border-pink-500:hover,
.group:hover .group-hover:border-pink-500 | border-color: var(--nu-pink-500) | #ec4899 |
.border-pink-600,
.hover:border-pink-600:hover,
.group:hover .group-hover:border-pink-600 | border-color: var(--nu-pink-600) | #d43386 |
.border-pink-700,
.hover:border-pink-700:hover,
.group:hover .group-hover:border-pink-700 | border-color: var(--nu-pink-700) | #b41c6e |
.border-pink-800,
.hover:border-pink-800:hover,
.group:hover .group-hover:border-pink-800 | border-color: var(--nu-pink-800) | #900455 |
.border-pink-900,
.hover:border-pink-900:hover,
.group:hover .group-hover:border-pink-900 | border-color: var(--nu-pink-900) | #6b003e |
.border-pink-950,
.hover:border-pink-950:hover,
.group:hover .group-hover:border-pink-950 | border-color: var(--nu-pink-950) | #4c002b |
Radius (123 rules)
| Selector | Declarations | Default value |
|---|---|---|
.rounded | border-radius: var(--nu-radius-md) | 0.5rem |
.square | border-radius: var(--nu-radius-none) | 0 |
.rounded-xs | border-radius: var(--nu-radius-xs) | 0.25rem |
.rounded-t-xs | border-top-left-radius: var(--nu-radius-xs)border-top-right-radius: var(--nu-radius-xs) | 0.25rem0.25rem |
.rounded-r-xs | border-top-right-radius: var(--nu-radius-xs)border-bottom-right-radius: var(--nu-radius-xs) | 0.25rem0.25rem |
.rounded-b-xs | border-bottom-left-radius: var(--nu-radius-xs)border-bottom-right-radius: var(--nu-radius-xs) | 0.25rem0.25rem |
.rounded-l-xs | border-top-left-radius: var(--nu-radius-xs)border-bottom-left-radius: var(--nu-radius-xs) | 0.25rem0.25rem |
.rounded-s-xs | border-start-start-radius: var(--nu-radius-xs)border-end-start-radius: var(--nu-radius-xs) | 0.25rem0.25rem |
.rounded-e-xs | border-start-end-radius: var(--nu-radius-xs)border-end-end-radius: var(--nu-radius-xs) | 0.25rem0.25rem |
.rounded-tl-xs | border-top-left-radius: var(--nu-radius-xs) | 0.25rem |
.rounded-tr-xs | border-top-right-radius: var(--nu-radius-xs) | 0.25rem |
.rounded-br-xs | border-bottom-right-radius: var(--nu-radius-xs) | 0.25rem |
.rounded-bl-xs | border-bottom-left-radius: var(--nu-radius-xs) | 0.25rem |
.rounded-ss-xs | border-start-start-radius: var(--nu-radius-xs) | 0.25rem |
.rounded-se-xs | border-start-end-radius: var(--nu-radius-xs) | 0.25rem |
.rounded-es-xs | border-end-start-radius: var(--nu-radius-xs) | 0.25rem |
.rounded-ee-xs | border-end-end-radius: var(--nu-radius-xs) | 0.25rem |
.rounded-sm | border-radius: var(--nu-radius-sm) | 0.375rem |
.rounded-t-sm | border-top-left-radius: var(--nu-radius-sm)border-top-right-radius: var(--nu-radius-sm) | 0.375rem0.375rem |
.rounded-r-sm | border-top-right-radius: var(--nu-radius-sm)border-bottom-right-radius: var(--nu-radius-sm) | 0.375rem0.375rem |
.rounded-b-sm | border-bottom-left-radius: var(--nu-radius-sm)border-bottom-right-radius: var(--nu-radius-sm) | 0.375rem0.375rem |
.rounded-l-sm | border-top-left-radius: var(--nu-radius-sm)border-bottom-left-radius: var(--nu-radius-sm) | 0.375rem0.375rem |
.rounded-s-sm | border-start-start-radius: var(--nu-radius-sm)border-end-start-radius: var(--nu-radius-sm) | 0.375rem0.375rem |
.rounded-e-sm | border-start-end-radius: var(--nu-radius-sm)border-end-end-radius: var(--nu-radius-sm) | 0.375rem0.375rem |
.rounded-tl-sm | border-top-left-radius: var(--nu-radius-sm) | 0.375rem |
.rounded-tr-sm | border-top-right-radius: var(--nu-radius-sm) | 0.375rem |
.rounded-br-sm | border-bottom-right-radius: var(--nu-radius-sm) | 0.375rem |
.rounded-bl-sm | border-bottom-left-radius: var(--nu-radius-sm) | 0.375rem |
.rounded-ss-sm | border-start-start-radius: var(--nu-radius-sm) | 0.375rem |
.rounded-se-sm | border-start-end-radius: var(--nu-radius-sm) | 0.375rem |
.rounded-es-sm | border-end-start-radius: var(--nu-radius-sm) | 0.375rem |
.rounded-ee-sm | border-end-end-radius: var(--nu-radius-sm) | 0.375rem |
.rounded-md | border-radius: var(--nu-radius-md) | 0.5rem |
.rounded-t-md | border-top-left-radius: var(--nu-radius-md)border-top-right-radius: var(--nu-radius-md) | 0.5rem0.5rem |
.rounded-r-md | border-top-right-radius: var(--nu-radius-md)border-bottom-right-radius: var(--nu-radius-md) | 0.5rem0.5rem |
.rounded-b-md | border-bottom-left-radius: var(--nu-radius-md)border-bottom-right-radius: var(--nu-radius-md) | 0.5rem0.5rem |
.rounded-l-md | border-top-left-radius: var(--nu-radius-md)border-bottom-left-radius: var(--nu-radius-md) | 0.5rem0.5rem |
.rounded-s-md | border-start-start-radius: var(--nu-radius-md)border-end-start-radius: var(--nu-radius-md) | 0.5rem0.5rem |
.rounded-e-md | border-start-end-radius: var(--nu-radius-md)border-end-end-radius: var(--nu-radius-md) | 0.5rem0.5rem |
.rounded-tl-md | border-top-left-radius: var(--nu-radius-md) | 0.5rem |
.rounded-tr-md | border-top-right-radius: var(--nu-radius-md) | 0.5rem |
.rounded-br-md | border-bottom-right-radius: var(--nu-radius-md) | 0.5rem |
.rounded-bl-md | border-bottom-left-radius: var(--nu-radius-md) | 0.5rem |
.rounded-ss-md | border-start-start-radius: var(--nu-radius-md) | 0.5rem |
.rounded-se-md | border-start-end-radius: var(--nu-radius-md) | 0.5rem |
.rounded-es-md | border-end-start-radius: var(--nu-radius-md) | 0.5rem |
.rounded-ee-md | border-end-end-radius: var(--nu-radius-md) | 0.5rem |
.rounded-lg | border-radius: var(--nu-radius-lg) | 0.75rem |
.rounded-t-lg | border-top-left-radius: var(--nu-radius-lg)border-top-right-radius: var(--nu-radius-lg) | 0.75rem0.75rem |
.rounded-r-lg | border-top-right-radius: var(--nu-radius-lg)border-bottom-right-radius: var(--nu-radius-lg) | 0.75rem0.75rem |
.rounded-b-lg | border-bottom-left-radius: var(--nu-radius-lg)border-bottom-right-radius: var(--nu-radius-lg) | 0.75rem0.75rem |
.rounded-l-lg | border-top-left-radius: var(--nu-radius-lg)border-bottom-left-radius: var(--nu-radius-lg) | 0.75rem0.75rem |
.rounded-s-lg | border-start-start-radius: var(--nu-radius-lg)border-end-start-radius: var(--nu-radius-lg) | 0.75rem0.75rem |
.rounded-e-lg | border-start-end-radius: var(--nu-radius-lg)border-end-end-radius: var(--nu-radius-lg) | 0.75rem0.75rem |
.rounded-tl-lg | border-top-left-radius: var(--nu-radius-lg) | 0.75rem |
.rounded-tr-lg | border-top-right-radius: var(--nu-radius-lg) | 0.75rem |
.rounded-br-lg | border-bottom-right-radius: var(--nu-radius-lg) | 0.75rem |
.rounded-bl-lg | border-bottom-left-radius: var(--nu-radius-lg) | 0.75rem |
.rounded-ss-lg | border-start-start-radius: var(--nu-radius-lg) | 0.75rem |
.rounded-se-lg | border-start-end-radius: var(--nu-radius-lg) | 0.75rem |
.rounded-es-lg | border-end-start-radius: var(--nu-radius-lg) | 0.75rem |
.rounded-ee-lg | border-end-end-radius: var(--nu-radius-lg) | 0.75rem |
.rounded-xl | border-radius: var(--nu-radius-xl) | 1rem |
.rounded-t-xl | border-top-left-radius: var(--nu-radius-xl)border-top-right-radius: var(--nu-radius-xl) | 1rem1rem |
.rounded-r-xl | border-top-right-radius: var(--nu-radius-xl)border-bottom-right-radius: var(--nu-radius-xl) | 1rem1rem |
.rounded-b-xl | border-bottom-left-radius: var(--nu-radius-xl)border-bottom-right-radius: var(--nu-radius-xl) | 1rem1rem |
.rounded-l-xl | border-top-left-radius: var(--nu-radius-xl)border-bottom-left-radius: var(--nu-radius-xl) | 1rem1rem |
.rounded-s-xl | border-start-start-radius: var(--nu-radius-xl)border-end-start-radius: var(--nu-radius-xl) | 1rem1rem |
.rounded-e-xl | border-start-end-radius: var(--nu-radius-xl)border-end-end-radius: var(--nu-radius-xl) | 1rem1rem |
.rounded-tl-xl | border-top-left-radius: var(--nu-radius-xl) | 1rem |
.rounded-tr-xl | border-top-right-radius: var(--nu-radius-xl) | 1rem |
.rounded-br-xl | border-bottom-right-radius: var(--nu-radius-xl) | 1rem |
.rounded-bl-xl | border-bottom-left-radius: var(--nu-radius-xl) | 1rem |
.rounded-ss-xl | border-start-start-radius: var(--nu-radius-xl) | 1rem |
.rounded-se-xl | border-start-end-radius: var(--nu-radius-xl) | 1rem |
.rounded-es-xl | border-end-start-radius: var(--nu-radius-xl) | 1rem |
.rounded-ee-xl | border-end-end-radius: var(--nu-radius-xl) | 1rem |
.rounded-2xl | border-radius: var(--nu-radius-2xl) | 1.25rem |
.rounded-t-2xl | border-top-left-radius: var(--nu-radius-2xl)border-top-right-radius: var(--nu-radius-2xl) | 1.25rem1.25rem |
.rounded-r-2xl | border-top-right-radius: var(--nu-radius-2xl)border-bottom-right-radius: var(--nu-radius-2xl) | 1.25rem1.25rem |
.rounded-b-2xl | border-bottom-left-radius: var(--nu-radius-2xl)border-bottom-right-radius: var(--nu-radius-2xl) | 1.25rem1.25rem |
.rounded-l-2xl | border-top-left-radius: var(--nu-radius-2xl)border-bottom-left-radius: var(--nu-radius-2xl) | 1.25rem1.25rem |
.rounded-s-2xl | border-start-start-radius: var(--nu-radius-2xl)border-end-start-radius: var(--nu-radius-2xl) | 1.25rem1.25rem |
.rounded-e-2xl | border-start-end-radius: var(--nu-radius-2xl)border-end-end-radius: var(--nu-radius-2xl) | 1.25rem1.25rem |
.rounded-tl-2xl | border-top-left-radius: var(--nu-radius-2xl) | 1.25rem |
.rounded-tr-2xl | border-top-right-radius: var(--nu-radius-2xl) | 1.25rem |
.rounded-br-2xl | border-bottom-right-radius: var(--nu-radius-2xl) | 1.25rem |
.rounded-bl-2xl | border-bottom-left-radius: var(--nu-radius-2xl) | 1.25rem |
.rounded-ss-2xl | border-start-start-radius: var(--nu-radius-2xl) | 1.25rem |
.rounded-se-2xl | border-start-end-radius: var(--nu-radius-2xl) | 1.25rem |
.rounded-es-2xl | border-end-start-radius: var(--nu-radius-2xl) | 1.25rem |
.rounded-ee-2xl | border-end-end-radius: var(--nu-radius-2xl) | 1.25rem |
.rounded-full | border-radius: var(--nu-radius-full) | 99in |
.rounded-t-full | border-top-left-radius: var(--nu-radius-full)border-top-right-radius: var(--nu-radius-full) | 99in99in |
.rounded-r-full | border-top-right-radius: var(--nu-radius-full)border-bottom-right-radius: var(--nu-radius-full) | 99in99in |
.rounded-b-full | border-bottom-left-radius: var(--nu-radius-full)border-bottom-right-radius: var(--nu-radius-full) | 99in99in |
.rounded-l-full | border-top-left-radius: var(--nu-radius-full)border-bottom-left-radius: var(--nu-radius-full) | 99in99in |
.rounded-s-full | border-start-start-radius: var(--nu-radius-full)border-end-start-radius: var(--nu-radius-full) | 99in99in |
.rounded-e-full | border-start-end-radius: var(--nu-radius-full)border-end-end-radius: var(--nu-radius-full) | 99in99in |
.rounded-tl-full | border-top-left-radius: var(--nu-radius-full) | 99in |
.rounded-tr-full | border-top-right-radius: var(--nu-radius-full) | 99in |
.rounded-br-full | border-bottom-right-radius: var(--nu-radius-full) | 99in |
.rounded-bl-full | border-bottom-left-radius: var(--nu-radius-full) | 99in |
.rounded-ss-full | border-start-start-radius: var(--nu-radius-full) | 99in |
.rounded-se-full | border-start-end-radius: var(--nu-radius-full) | 99in |
.rounded-es-full | border-end-start-radius: var(--nu-radius-full) | 99in |
.rounded-ee-full | border-end-end-radius: var(--nu-radius-full) | 99in |
.rounded-none | border-radius: var(--nu-radius-none) | 0 |
.rounded-t-none | border-top-left-radius: var(--nu-radius-none)border-top-right-radius: var(--nu-radius-none) | 00 |
.rounded-r-none | border-top-right-radius: var(--nu-radius-none)border-bottom-right-radius: var(--nu-radius-none) | 00 |
.rounded-b-none | border-bottom-left-radius: var(--nu-radius-none)border-bottom-right-radius: var(--nu-radius-none) | 00 |
.rounded-l-none | border-top-left-radius: var(--nu-radius-none)border-bottom-left-radius: var(--nu-radius-none) | 00 |
.rounded-s-none | border-start-start-radius: var(--nu-radius-none)border-end-start-radius: var(--nu-radius-none) | 00 |
.rounded-e-none | border-start-end-radius: var(--nu-radius-none)border-end-end-radius: var(--nu-radius-none) | 00 |
.rounded-tl-none | border-top-left-radius: var(--nu-radius-none) | 0 |
.rounded-tr-none | border-top-right-radius: var(--nu-radius-none) | 0 |
.rounded-br-none | border-bottom-right-radius: var(--nu-radius-none) | 0 |
.rounded-bl-none | border-bottom-left-radius: var(--nu-radius-none) | 0 |
.rounded-ss-none | border-start-start-radius: var(--nu-radius-none) | 0 |
.rounded-se-none | border-start-end-radius: var(--nu-radius-none) | 0 |
.rounded-es-none | border-end-start-radius: var(--nu-radius-none) | 0 |
.rounded-ee-none | border-end-end-radius: var(--nu-radius-none) | 0 |
.pill | border-radius: var(--nu-radius-full) | 99in |
Accessibility and RTL
Section titled “Accessibility and RTL”- Mirror with logical utilities. Use
border-s,border-e,rounded-s-*,rounded-e-*and the logical corner classes for accents and joined controls that should follow the reading direction. - Control edges need contrast. Use
border-controlfor the edges of inputs and other controls: it is darker thanborder-regularso the control boundary meets 3:1 against its background (WCAG 1.4.11 Non-text Contrast). - Do not rely on colour alone. A red border is not enough to mark an invalid field. Pair it with a text message and
aria-invalid="true"(WCAG 1.4.1 Use of Color). - Keep focus visible. Do not remove the focus outline in favour of a border colour change unless the border change itself meets the contrast and size of a focus indicator (WCAG 2.4.7 Focus Visible).
- Forced colours. In Windows High Contrast mode, borders stay visible while background colours are replaced; a border is a reliable way to show a card or button edge.