Utilities
Borders
Generated from the registry, so this page can't drift from the compiler.
border
Adds a solid border, with an optional width and color.
Syntax
syntax
border()
border(width)
border(width,color)
border[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
width? | keyword | none |
| width in px, 0–64 | See type | |
color? | colors token | brand brand-dark dark light muted white black gray-100 gray-200 gray-300 gray-400 gray-500 gray-600 gray-700 gray-800 gray-900 red amber green blue |
| keyword | transparent current inherit | |
| var(--name) | See type | |
| alpha(color,0–100) | See type |
Examples and generated CSS
expressions
border()
border(2)
border(1,muted)
border(none)
border[1px_dashed_#333]Generated CSS
.border\(\) {
border-width: 1px;
border-style: solid;
}
.border\(1\,muted\) {
border-width: 1px;
border-style: solid;
border-color: var(--croff-color-muted);
}
.border\(2\) {
border-width: 2px;
border-style: solid;
}
.border\(none\) {
border: none;
}
.border\[1px_dashed_\#333\] {
border: 1px dashed #333;
}Theme behavior
Reads tokens from colors. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
expressions
md:border()
hover:border()
lg:focus:border()border-width
Sets the border width only.
Syntax
syntax
border-width(value)
border-width[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | width in px, 0–64 | See type |
Examples and generated CSS
expressions
border-width(2)
border-width[1px_0]Generated CSS
.border-width\(2\) {
border-width: 2px;
}
.border-width\[1px_0\] {
border-width: 1px 0;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
expressions
md:border-width(2)
hover:border-width(2)
lg:focus:border-width(2)border-color
Sets the border color only.
Syntax
syntax
border-color(value)
border-color[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | colors token | brand brand-dark dark light muted white black gray-100 gray-200 gray-300 gray-400 gray-500 gray-600 gray-700 gray-800 gray-900 red amber green blue |
| keyword | transparent current inherit | |
| var(--name) | See type | |
| alpha(color,0–100) | See type |
Examples and generated CSS
expressions
border-color(muted)
hover:border-color(brand)
border-color[#333]Generated CSS
.border-color\(muted\) {
border-color: var(--croff-color-muted);
}
.border-color\[\#333\] {
border-color: #333;
}
.hover\:border-color\(brand\):hover {
border-color: var(--croff-color-brand);
}Theme behavior
Reads tokens from colors. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
expressions
md:border-color(muted)
hover:border-color(muted)
lg:focus:border-color(muted)border-style
Sets the border style only.
Syntax
syntax
border-style(value)Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | solid dashed dotted double none |
Examples and generated CSS
expressions
border-style(dashed)Generated CSS
.border-style\(dashed\) {
border-style: dashed;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
expressions
md:border-style(dashed)
hover:border-style(dashed)
lg:focus:border-style(dashed)border-top
Adds a solid top border, with an optional width and color.
Syntax
syntax
border-top()
border-top(width)
border-top(width,color)
border-top[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
width? | keyword | none |
| width in px, 0–64 | See type | |
color? | colors token | brand brand-dark dark light muted white black gray-100 gray-200 gray-300 gray-400 gray-500 gray-600 gray-700 gray-800 gray-900 red amber green blue |
| keyword | transparent current inherit | |
| var(--name) | See type | |
| alpha(color,0–100) | See type |
Examples and generated CSS
expressions
border-top()
border-top(2,muted)
border-top[1px_dashed_#333]Generated CSS
.border-top\(\) {
border-top-width: 1px;
border-top-style: solid;
}
.border-top\(2\,muted\) {
border-top-width: 2px;
border-top-style: solid;
border-top-color: var(--croff-color-muted);
}
.border-top\[1px_dashed_\#333\] {
border-top: 1px dashed #333;
}Theme behavior
Reads tokens from colors. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
expressions
md:border-top()
hover:border-top()
lg:focus:border-top()border-right
Adds a solid right border, with an optional width and color.
Syntax
syntax
border-right()
border-right(width)
border-right(width,color)
border-right[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
width? | keyword | none |
| width in px, 0–64 | See type | |
color? | colors token | brand brand-dark dark light muted white black gray-100 gray-200 gray-300 gray-400 gray-500 gray-600 gray-700 gray-800 gray-900 red amber green blue |
| keyword | transparent current inherit | |
| var(--name) | See type | |
| alpha(color,0–100) | See type |
Examples and generated CSS
expressions
border-right()
border-right(2,muted)
border-right[1px_dashed_#333]Generated CSS
.border-right\(\) {
border-right-width: 1px;
border-right-style: solid;
}
.border-right\(2\,muted\) {
border-right-width: 2px;
border-right-style: solid;
border-right-color: var(--croff-color-muted);
}
.border-right\[1px_dashed_\#333\] {
border-right: 1px dashed #333;
}Theme behavior
Reads tokens from colors. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
expressions
md:border-right()
hover:border-right()
lg:focus:border-right()border-bottom
Adds a solid bottom border, with an optional width and color.
Syntax
syntax
border-bottom()
border-bottom(width)
border-bottom(width,color)
border-bottom[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
width? | keyword | none |
| width in px, 0–64 | See type | |
color? | colors token | brand brand-dark dark light muted white black gray-100 gray-200 gray-300 gray-400 gray-500 gray-600 gray-700 gray-800 gray-900 red amber green blue |
| keyword | transparent current inherit | |
| var(--name) | See type | |
| alpha(color,0–100) | See type |
Examples and generated CSS
expressions
border-bottom()
border-bottom(2,muted)
border-bottom[1px_dashed_#333]Generated CSS
.border-bottom\(\) {
border-bottom-width: 1px;
border-bottom-style: solid;
}
.border-bottom\(2\,muted\) {
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: var(--croff-color-muted);
}
.border-bottom\[1px_dashed_\#333\] {
border-bottom: 1px dashed #333;
}Theme behavior
Reads tokens from colors. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
expressions
md:border-bottom()
hover:border-bottom()
lg:focus:border-bottom()border-left
Adds a solid left border, with an optional width and color.
Syntax
syntax
border-left()
border-left(width)
border-left(width,color)
border-left[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
width? | keyword | none |
| width in px, 0–64 | See type | |
color? | colors token | brand brand-dark dark light muted white black gray-100 gray-200 gray-300 gray-400 gray-500 gray-600 gray-700 gray-800 gray-900 red amber green blue |
| keyword | transparent current inherit | |
| var(--name) | See type | |
| alpha(color,0–100) | See type |
Examples and generated CSS
expressions
border-left()
border-left(2,muted)
border-left[1px_dashed_#333]Generated CSS
.border-left\(\) {
border-left-width: 1px;
border-left-style: solid;
}
.border-left\(2\,muted\) {
border-left-width: 2px;
border-left-style: solid;
border-left-color: var(--croff-color-muted);
}
.border-left\[1px_dashed_\#333\] {
border-left: 1px dashed #333;
}Theme behavior
Reads tokens from colors. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
expressions
md:border-left()
hover:border-left()
lg:focus:border-left()radius
Rounds the corners.
Syntax
syntax
radius(value)
radius[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | radius token | none sm md lg xl 2xl full |
| var(--name) | See type |
Examples and generated CSS
expressions
radius(md)
radius(full)
radius[3px_0]Generated CSS
.radius\(full\) {
border-radius: var(--croff-radius-full);
}
.radius\(md\) {
border-radius: var(--croff-radius-md);
}
.radius\[3px_0\] {
border-radius: 3px 0;
}Theme behavior
Reads tokens from radius. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
expressions
md:radius(md)
hover:radius(md)
lg:focus:radius(md)outline
Adds an outline, with an optional width and color.
Syntax
syntax
outline()
outline(width)
outline(width,color)
outline[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
width? | keyword | none |
| width in px, 0–64 | See type | |
color? | colors token | brand brand-dark dark light muted white black gray-100 gray-200 gray-300 gray-400 gray-500 gray-600 gray-700 gray-800 gray-900 red amber green blue |
| keyword | transparent current inherit | |
| var(--name) | See type | |
| alpha(color,0–100) | See type |
Examples and generated CSS
expressions
outline(2)
outline(2,brand)
focus:outline(none)
outline[1px_dotted_red]Generated CSS
.outline\(2\) {
outline-width: 2px;
outline-style: solid;
}
.outline\(2\,brand\) {
outline-width: 2px;
outline-style: solid;
outline-color: var(--croff-color-brand);
}
.outline\[1px_dotted_red\] {
outline: 1px dotted red;
}
.focus\:outline\(none\):focus {
outline: 2px solid transparent;
outline-offset: 2px;
}Theme behavior
Reads tokens from colors. A token compiles to its custom property, so changing it in your theme changes every use. outline(none) keeps a transparent outline, so forced-colors mode still shows focus.
Responsive and state usage
expressions
md:outline(2)
hover:outline(2)
lg:focus:outline(2)outline-offset
Sets the space between the outline and the border.
Syntax
syntax
outline-offset(value)
outline-offset[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | offset in px | See type |
Examples and generated CSS
expressions
outline-offset(2)
outline-offset[0.2em]Generated CSS
.outline-offset\(2\) {
outline-offset: 2px;
}
.outline-offset\[0\.2em\] {
outline-offset: 0.2em;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
expressions
md:outline-offset(2)
hover:outline-offset(2)
lg:focus:outline-offset(2)ring
Draws a solid ring around the element using box-shadow.
Syntax
syntax
ring(width)
ring(width,color)
ring[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
width | width in px, 0–64 | See type |
color? | colors token | brand brand-dark dark light muted white black gray-100 gray-200 gray-300 gray-400 gray-500 gray-600 gray-700 gray-800 gray-900 red amber green blue |
| keyword | transparent current inherit | |
| var(--name) | See type | |
| alpha(color,0–100) | See type |
Examples and generated CSS
expressions
ring(2)
focus:ring(2,brand)
ring(2,alpha(brand,50))Generated CSS
.ring\(2\) {
box-shadow: 0 0 0 2px currentColor;
}
.ring\(2\,alpha\(brand\,50\)\) {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--croff-color-brand) 50%, transparent);
}
.focus\:ring\(2\,brand\):focus {
box-shadow: 0 0 0 2px var(--croff-color-brand);
}Theme behavior
Reads tokens from colors. A token compiles to its custom property, so changing it in your theme changes every use. ring and shadow both set box-shadow and do not compose. ring wins when both apply, because it comes later in the output.
Responsive and state usage
expressions
md:ring(2)
hover:ring(2)
lg:focus:ring(2)