Skip to content
TeaCSS documentation

Borders

Border edges, radius, colours, and shapes. TeaCSS Standard reference.

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