This is the Standard reference for borders.
The vocabulary comes from the teacss-ts Storybook at revision
9de266d for package version 0.10.11.
Each value list gives finite examples and named values for its prefixes. A
bracket or variable example demonstrates that open form for the same prefix;
the listed arbitrary literals are samples, not every accepted literal. Check
the Storybook token reference for more examples,
and do not infer support from a different prefix.
border
Interactive example. Rule type: shorthand.
Prefixes: border, border-x, border-y, border-inline, border-block, border-t, border-r, border-b, border-l, border-s, border-e, border-u, border-n. Example: border:[1px_solid_red]. It emits border:1px solid red;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (2)
[1px_solid_red], $border
border-width
Interactive example.
Prefixes: border-width, border-t-width, border-r-width, border-b-width, border-l-width, border-x-width, border-y-width, border-inline-width, border-block-width, border-s-width, border-e-width, border-u-width, border-n-width. Example: border-width:0. It emits border-width:0px;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (21)
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1x, 2x,
3x, 4x, 5x, 6x, 7x, 8x, 9x, [3px], $width
border-style
Interactive example.
Prefixes: border-style, border-t-style, border-r-style, border-b-style, border-l-style, border-x-style, border-y-style, border-inline-style, border-block-style, border-s-style, border-e-style, border-u-style, border-n-style. Example: border-style:solid. It emits border-style:solid;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (10)
solid, dashed, dotted, double, groove, ridge, inset, outset, hidden, none
border-color
Interactive example.
Vocabulary 1. Prefixes: border-color. Example: border-color:ink-100. It emits border-color:var(--color-ink-100);. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (515)
ink-100, ink-150, ink-200, ink-300, ink-400, ink-500, ink-600, ink-700, ink-800, ink-850, ink-900, ink-950,
ink-000, gray-100, gray-150, gray-200, gray-300, gray-400, gray-500, gray-600, gray-700, gray-800, gray-850, gray-900,
gray-950, gray-000, mauve-100, mauve-150, mauve-200, mauve-300, mauve-400, mauve-500, mauve-600, mauve-700, mauve-800, mauve-850,
mauve-900, mauve-950, mauve-000, slate-100, slate-150, slate-200, slate-300, slate-400, slate-500, slate-600, slate-700, slate-800,
slate-850, slate-900, slate-950, slate-000, sage-100, sage-150, sage-200, sage-300, sage-400, sage-500, sage-600, sage-700,
sage-800, sage-850, sage-900, sage-950, sage-000, olive-100, olive-150, olive-200, olive-300, olive-400, olive-500, olive-600,
olive-700, olive-800, olive-850, olive-900, olive-950, olive-000, sand-100, sand-150, sand-200, sand-300, sand-400, sand-500,
sand-600, sand-700, sand-800, sand-850, sand-900, sand-950, sand-000, tomato-100, tomato-150, tomato-200, tomato-300, tomato-400,
tomato-500, tomato-600, tomato-700, tomato-800, tomato-850, tomato-900, tomato-950, tomato-000, red-100, red-150, red-200, red-300,
red-400, red-500, red-600, red-700, red-800, red-850, red-900, red-950, red-000, ruby-100, ruby-150, ruby-200,
ruby-300, ruby-400, ruby-500, ruby-600, ruby-700, ruby-800, ruby-850, ruby-900, ruby-950, ruby-000, crimson-100, crimson-150,
crimson-200, crimson-300, crimson-400, crimson-500, crimson-600, crimson-700, crimson-800, crimson-850, crimson-900, crimson-950, crimson-000, pink-100,
pink-150, pink-200, pink-300, pink-400, pink-500, pink-600, pink-700, pink-800, pink-850, pink-900, pink-950, pink-000,
plum-100, plum-150, plum-200, plum-300, plum-400, plum-500, plum-600, plum-700, plum-800, plum-850, plum-900, plum-950,
plum-000, purple-100, purple-150, purple-200, purple-300, purple-400, purple-500, purple-600, purple-700, purple-800, purple-850, purple-900,
purple-950, purple-000, violet-100, violet-150, violet-200, violet-300, violet-400, violet-500, violet-600, violet-700, violet-800, violet-850,
violet-900, violet-950, violet-000, iris-100, iris-150, iris-200, iris-300, iris-400, iris-500, iris-600, iris-700, iris-800,
iris-850, iris-900, iris-950, iris-000, indigo-100, indigo-150, indigo-200, indigo-300, indigo-400, indigo-500, indigo-600, indigo-700,
indigo-800, indigo-850, indigo-900, indigo-950, indigo-000, blue-100, blue-150, blue-200, blue-300, blue-400, blue-500, blue-600,
blue-700, blue-800, blue-850, blue-900, blue-950, blue-000, cyan-100, cyan-150, cyan-200, cyan-300, cyan-400, cyan-500,
cyan-600, cyan-700, cyan-800, cyan-850, cyan-900, cyan-950, cyan-000, teal-100, teal-150, teal-200, teal-300, teal-400,
teal-500, teal-600, teal-700, teal-800, teal-850, teal-900, teal-950, teal-000, jade-100, jade-150, jade-200, jade-300,
jade-400, jade-500, jade-600, jade-700, jade-800, jade-850, jade-900, jade-950, jade-000, green-100, green-150, green-200,
green-300, green-400, green-500, green-600, green-700, green-800, green-850, green-900, green-950, green-000, grass-100, grass-150,
grass-200, grass-300, grass-400, grass-500, grass-600, grass-700, grass-800, grass-850, grass-900, grass-950, grass-000, brown-100,
brown-150, brown-200, brown-300, brown-400, brown-500, brown-600, brown-700, brown-800, brown-850, brown-900, brown-950, brown-000,
bronze-100, bronze-150, bronze-200, bronze-300, bronze-400, bronze-500, bronze-600, bronze-700, bronze-800, bronze-850, bronze-900, bronze-950,
bronze-000, gold-100, gold-150, gold-200, gold-300, gold-400, gold-500, gold-600, gold-700, gold-800, gold-850, gold-900,
gold-950, gold-000, sky-100, sky-150, sky-200, sky-300, sky-400, sky-500, sky-600, sky-700, sky-800, sky-850,
sky-900, sky-950, sky-000, mint-100, mint-150, mint-200, mint-300, mint-400, mint-500, mint-600, mint-700, mint-800,
mint-850, mint-900, mint-950, mint-000, lime-100, lime-150, lime-200, lime-300, lime-400, lime-500, lime-600, lime-700,
lime-800, lime-850, lime-900, lime-950, lime-000, yellow-100, yellow-150, yellow-200, yellow-300, yellow-400, yellow-500, yellow-600,
yellow-700, yellow-800, yellow-850, yellow-900, yellow-950, yellow-000, amber-100, amber-150, amber-200, amber-300, amber-400, amber-500,
amber-600, amber-700, amber-800, amber-850, amber-900, amber-950, amber-000, orange-100, orange-150, orange-200, orange-300, orange-400,
orange-500, orange-600, orange-700, orange-800, orange-850, orange-900, orange-950, orange-000, primary-100, primary-150, primary-200, primary-300,
primary-400, primary-500, primary-600, primary-700, primary-800, primary-850, primary-900, primary-950, primary-000, neutral-100, neutral-150, neutral-200,
neutral-300, neutral-400, neutral-500, neutral-600, neutral-700, neutral-800, neutral-850, neutral-900, neutral-950, neutral-000, focused-100, focused-150,
focused-200, focused-300, focused-400, focused-500, focused-600, focused-700, focused-800, focused-850, focused-900, focused-950, focused-000, success-100,
success-150, success-200, success-300, success-400, success-500, success-600, success-700, success-800, success-850, success-900, success-950, success-000,
warning-100, warning-150, warning-200, warning-300, warning-400, warning-500, warning-600, warning-700, warning-800, warning-850, warning-900, warning-950,
warning-000, failure-100, failure-150, failure-200, failure-300, failure-400, failure-500, failure-600, failure-700, failure-800, failure-850, failure-900,
failure-950, failure-000, general-100, general-150, general-200, general-300, general-400, general-500, general-600, general-700, general-800, general-850,
general-900, general-950, general-000, transparent, current, black, white, [#abc], $color, $color|white, red-500/50
Vocabulary 2. Prefixes: border-t-color, border-r-color, border-b-color, border-l-color, border-x-color, border-y-color, border-inline-color, border-block-color, border-s-color, border-e-color, border-u-color, border-n-color. Example: border-t-color:red-500. It emits border-top-color:var(--color-red-500);. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (9)
red-500, transparent, current, black, white, [#abc], $color, $color|white, red-500/50
border-shape
Interactive example. Maturity: experimental. Browser support: CSS Borders Level 4 shape controls have limited browser support.
Prefixes: border-shape. Example: border-shape:none. It emits border-shape:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
none, [circle(50%)], [circle(50%)_padding-box,_inset(10%)_content-box], $borderShape
border-image
Interactive example.
Prefixes: border-image. Example: border-image:[url(star.png)_30_round]. It emits border-image:url(star.png) 30 round;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (3)
[url(star.png)_30_round], [linear-gradient(red,blue)_1], $image
border-image-source
Interactive example.
Prefixes: border-image-source. Example: border-image-source:none. It emits border-image-source:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
none, [url(star.png)], [linear-gradient(red,blue)], $source
border-image-slice
Interactive example.
Prefixes: border-image-slice. Example: border-image-slice:0. It emits border-image-slice:0;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (7)
0, 1, 2, 3, 4, [30_fill], $slice
border-image-width
Interactive example.
Prefixes: border-image-width. Example: border-image-width:0. It emits border-image-width:0;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (7)
0, 1, 2, 3, 4, [10px], $width
border-image-outset
Interactive example.
Prefixes: border-image-outset. Example: border-image-outset:0. It emits border-image-outset:0;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (7)
0, 1, 2, 3, 4, [7px], $outset
border-image-repeat
Interactive example.
Prefixes: border-image-repeat. Example: border-image-repeat:stretch. It emits border-image-repeat:stretch;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
stretch, repeat, round, space, [stretch_round], $repeat
border-radius
Interactive example.
Vocabulary 1. Prefixes: rd. Example: rd:none. It emits border-radius:0px;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (12)
none, 1x, 2x, 3x, 4x, 5x, 6x, 100%, 10px, [10px_20px], $edgeRadius, [10px_20px/30px_40px]
Vocabulary 2. Prefixes: rd-t, rd-r, rd-b, rd-l, rd-s, rd-e, rd-u, rd-n. Example: rd-t:none. It emits border-top-left-radius:0px;border-top-right-radius:0px;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (12)
none, 1x, 2x, 3x, 4x, 5x, 6x, 100%, 10px, [10px_20px], $edgeRadius, [10px_20px/30px_40px]
Vocabulary 3. Prefixes: rd-tl, rd-tr, rd-br, rd-bl, rd-ss, rd-se, rd-es, rd-ee. Example: rd-tl:none. It emits border-top-left-radius:0px;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (11)
none, 1x, 2x, 3x, 4x, 5x, 6x, 100%, 10px, [10px_20px], $edgeRadius
corner
Interactive example.
Prefixes: corner, corner-t, corner-r, corner-b, corner-l, corner-s, corner-e, corner-u, corner-n, corner-tl, corner-tr, corner-br, corner-bl, corner-ss, corner-se, corner-es, corner-ee. Example: corner:none. It emits corner:0px;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (19)
none, 1x, 2x, 3x, 4x, 5x, 6x, 100%, 10px, round, scoop, bevel,
notch, square, squircle, [10px_bevel], [10px_20px_scoop_notch], [12px_superellipse(2)], $corner
corner-shape
Interactive example. Maturity: experimental. Browser support: CSS Borders Level 4 shape controls have limited browser support.
Vocabulary 1. Prefixes: corner-shape, corner-t-shape, corner-r-shape, corner-b-shape, corner-l-shape, corner-s-shape, corner-e-shape, corner-u-shape, corner-n-shape. Example: corner-shape:round. It emits corner-shape:round;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (9)
round, scoop, bevel, notch, square, squircle, [round_scoop], [superellipse(2)], $cornerShape
Vocabulary 2. Prefixes: corner-tl-shape, corner-tr-shape, corner-br-shape, corner-bl-shape, corner-ss-shape, corner-se-shape, corner-es-shape, corner-ee-shape. Example: corner-tl-shape:round. It emits corner-top-left-shape:round;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (8)
round, scoop, bevel, notch, square, squircle, [superellipse(2)], $cornerShape