This is the Standard reference for borders.
It follows the authored TeaCSS vocabulary at source revision
fa3709a for package version 0.7.1.
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 (476)
ink-100, ink-150, ink-200, ink-300, ink-400, ink-500, ink-600, ink-700, ink-800, ink-850, ink-900, ink-950,
gray-100, gray-150, gray-200, gray-300, gray-400, gray-500, gray-600, gray-700, gray-800, gray-850, gray-900, gray-950,
mauve-100, mauve-150, mauve-200, mauve-300, mauve-400, mauve-500, mauve-600, mauve-700, mauve-800, mauve-850, mauve-900, mauve-950,
slate-100, slate-150, slate-200, slate-300, slate-400, slate-500, slate-600, slate-700, slate-800, slate-850, slate-900, slate-950,
sage-100, sage-150, sage-200, sage-300, sage-400, sage-500, sage-600, sage-700, sage-800, sage-850, sage-900, sage-950,
olive-100, olive-150, olive-200, olive-300, olive-400, olive-500, olive-600, olive-700, olive-800, olive-850, olive-900, olive-950,
sand-100, sand-150, sand-200, sand-300, sand-400, sand-500, sand-600, sand-700, sand-800, sand-850, sand-900, sand-950,
tomato-100, tomato-150, tomato-200, tomato-300, tomato-400, tomato-500, tomato-600, tomato-700, tomato-800, tomato-850, tomato-900, tomato-950,
red-100, red-150, red-200, red-300, red-400, red-500, red-600, red-700, red-800, red-850, red-900, red-950,
ruby-100, ruby-150, ruby-200, ruby-300, ruby-400, ruby-500, ruby-600, ruby-700, ruby-800, ruby-850, ruby-900, ruby-950,
crimson-100, crimson-150, crimson-200, crimson-300, crimson-400, crimson-500, crimson-600, crimson-700, crimson-800, crimson-850, crimson-900, crimson-950,
pink-100, pink-150, pink-200, pink-300, pink-400, pink-500, pink-600, pink-700, pink-800, pink-850, pink-900, pink-950,
plum-100, plum-150, plum-200, plum-300, plum-400, plum-500, plum-600, plum-700, plum-800, plum-850, plum-900, plum-950,
purple-100, purple-150, purple-200, purple-300, purple-400, purple-500, purple-600, purple-700, purple-800, purple-850, purple-900, purple-950,
violet-100, violet-150, violet-200, violet-300, violet-400, violet-500, violet-600, violet-700, violet-800, violet-850, violet-900, violet-950,
iris-100, iris-150, iris-200, iris-300, iris-400, iris-500, iris-600, iris-700, iris-800, iris-850, iris-900, iris-950,
indigo-100, indigo-150, indigo-200, indigo-300, indigo-400, indigo-500, indigo-600, indigo-700, indigo-800, indigo-850, indigo-900, indigo-950,
blue-100, blue-150, blue-200, blue-300, blue-400, blue-500, blue-600, blue-700, blue-800, blue-850, blue-900, blue-950,
cyan-100, cyan-150, cyan-200, cyan-300, cyan-400, cyan-500, cyan-600, cyan-700, cyan-800, cyan-850, cyan-900, cyan-950,
teal-100, teal-150, teal-200, teal-300, teal-400, teal-500, teal-600, teal-700, teal-800, teal-850, teal-900, teal-950,
jade-100, jade-150, jade-200, jade-300, jade-400, jade-500, jade-600, jade-700, jade-800, jade-850, jade-900, jade-950,
green-100, green-150, green-200, green-300, green-400, green-500, green-600, green-700, green-800, green-850, green-900, green-950,
grass-100, grass-150, grass-200, grass-300, grass-400, grass-500, grass-600, grass-700, grass-800, grass-850, grass-900, grass-950,
brown-100, brown-150, brown-200, brown-300, brown-400, brown-500, brown-600, brown-700, brown-800, brown-850, brown-900, brown-950,
bronze-100, bronze-150, bronze-200, bronze-300, bronze-400, bronze-500, bronze-600, bronze-700, bronze-800, bronze-850, bronze-900, bronze-950,
gold-100, gold-150, gold-200, gold-300, gold-400, gold-500, gold-600, gold-700, gold-800, gold-850, gold-900, gold-950,
sky-100, sky-150, sky-200, sky-300, sky-400, sky-500, sky-600, sky-700, sky-800, sky-850, sky-900, sky-950,
mint-100, mint-150, mint-200, mint-300, mint-400, mint-500, mint-600, mint-700, mint-800, mint-850, mint-900, mint-950,
lime-100, lime-150, lime-200, lime-300, lime-400, lime-500, lime-600, lime-700, lime-800, lime-850, lime-900, lime-950,
yellow-100, yellow-150, yellow-200, yellow-300, yellow-400, yellow-500, yellow-600, yellow-700, yellow-800, yellow-850, yellow-900, yellow-950,
amber-100, amber-150, amber-200, amber-300, amber-400, amber-500, amber-600, amber-700, amber-800, amber-850, amber-900, amber-950,
orange-100, orange-150, orange-200, orange-300, orange-400, orange-500, orange-600, orange-700, orange-800, orange-850, orange-900, orange-950,
primary-100, primary-150, primary-200, primary-300, primary-400, primary-500, primary-600, primary-700, primary-800, primary-850, primary-900, primary-950,
neutral-100, neutral-150, neutral-200, neutral-300, neutral-400, neutral-500, neutral-600, neutral-700, neutral-800, neutral-850, neutral-900, neutral-950,
focused-100, focused-150, focused-200, focused-300, focused-400, focused-500, focused-600, focused-700, focused-800, focused-850, focused-900, focused-950,
success-100, success-150, success-200, success-300, success-400, success-500, success-600, success-700, success-800, success-850, success-900, success-950,
warning-100, warning-150, warning-200, warning-300, warning-400, warning-500, warning-600, warning-700, warning-800, warning-850, warning-900, warning-950,
failure-100, failure-150, failure-200, failure-300, failure-400, failure-500, failure-600, failure-700, failure-800, failure-850, failure-900, failure-950,
general-100, general-150, general-200, general-300, general-400, general-500, general-600, general-700, general-800, general-850, general-900, general-950,
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