This is the Standard reference for gutters.
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.
gap
Interactive example.
Vocabulary 1. Prefixes: gap. Example: gap:0. It emits gap:0;.
Documented values (11)
0, 1x, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, normal
Vocabulary 2. Prefixes: gap-column. Example: gap-column:0. It emits column-gap:0;.
Documented values (11)
0, 1x, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, normal
Vocabulary 3. Prefixes: gap-row. Example: gap-row:0. It emits row-gap:0;.
Documented values (11)
0, 1x, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, normal
rule
Interactive example. Maturity: experimental. Browser support: CSS gap decorations are a draft feature with limited browser support.
Vocabulary 1. Prefixes: rule. Example: rule:[2px_solid_red]. It emits rule:2px solid red;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
[2px_solid_red], [thin_dashed_currentColor], [repeat(2,_1px_solid_red,_3px_dotted_blue)], $rule
Vocabulary 2. Prefixes: rule-column. Example: rule-column:[2px_solid_red]. It emits column-rule:2px solid red;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
[2px_solid_red], [thin_dashed_currentColor], [repeat(2,_1px_solid_red,_3px_dotted_blue)], $rule
Vocabulary 3. Prefixes: rule-row. Example: rule-row:[2px_solid_red]. It emits row-rule:2px solid red;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
[2px_solid_red], [thin_dashed_currentColor], [repeat(2,_1px_solid_red,_3px_dotted_blue)], $rule
rule-break
Interactive example. Maturity: experimental. Browser support: CSS gap decorations are a draft feature with limited browser support.
Vocabulary 1. Prefixes: rule-break. Example: rule-break:normal. It emits rule-break:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (3)
normal, none, intersection
Vocabulary 2. Prefixes: rule-column-break. Example: rule-column-break:normal. It emits column-rule-break:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (3)
normal, none, intersection
Vocabulary 3. Prefixes: rule-row-break. Example: rule-row-break:normal. It emits row-rule-break:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (3)
normal, none, intersection
rule-color
Interactive example. Maturity: experimental. Browser support: CSS gap decorations are a draft feature with limited browser support.
Vocabulary 1. Prefixes: rule-color. Example: rule-color:ink-100. It emits rule-color:var(--color-ink-100);. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (479)
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, [red,_blue], [repeat(2,_red,_blue)], $ruleColor
Vocabulary 2. Prefixes: rule-column-color. Example: rule-column-color:ink-100. It emits column-rule-color:var(--color-ink-100);. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (479)
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, [red,_blue], [repeat(2,_red,_blue)], $ruleColor
Vocabulary 3. Prefixes: rule-row-color. Example: rule-row-color:ink-100. It emits row-rule-color:var(--color-ink-100);. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (479)
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, [red,_blue], [repeat(2,_red,_blue)], $ruleColor
rule-inset
Interactive example. Maturity: experimental. Browser support: CSS gap decorations are a draft feature with limited browser support.
Vocabulary 1. Prefixes: rule-inset. Example: rule-inset:0. It emits rule-inset:0;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (9)
0, 1, 1x, 2, [10%], [-5px], [2px_4px/6px_8px], $inset, overlap-join
Vocabulary 2. Prefixes: rule-column-inset. Example: rule-column-inset:0. It emits column-rule-inset:0;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (9)
0, 1, 1x, 2, [10%], [-5px], [2px_4px/6px_8px], $inset, overlap-join
Vocabulary 3. Prefixes: rule-row-inset. Example: rule-row-inset:0. It emits row-rule-inset:0;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (9)
0, 1, 1x, 2, [10%], [-5px], [2px_4px/6px_8px], $inset, overlap-join
rule-inset-cap
Interactive example. Maturity: experimental. Browser support: CSS gap decorations are a draft feature with limited browser support.
Prefixes: rule-inset-cap, rule-column-inset-cap, rule-row-inset-cap. Example: rule-inset-cap:0. It emits rule-inset-cap:0;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (10)
0, 1, 1x, 2, [10%], [-5px], [2px], $inset, overlap-join, [2px_4px]
rule-inset-junction
Interactive example. Maturity: experimental. Browser support: CSS gap decorations are a draft feature with limited browser support.
Prefixes: rule-inset-junction, rule-column-inset-junction, rule-row-inset-junction. Example: rule-inset-junction:0. It emits rule-inset-junction:0;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (10)
0, 1, 1x, 2, [10%], [-5px], [2px], $inset, overlap-join, [2px_4px]
rule-inset-start
Interactive example. Maturity: experimental. Browser support: CSS gap decorations are a draft feature with limited browser support.
Prefixes: rule-inset-start, rule-column-inset-start, rule-row-inset-start. Example: rule-inset-start:0. It emits rule-inset-start:0;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (9)
0, 1, 1x, 2, [10%], [-5px], [2px], $inset, overlap-join
rule-inset-end
Interactive example. Maturity: experimental. Browser support: CSS gap decorations are a draft feature with limited browser support.
Prefixes: rule-inset-end, rule-column-inset-end, rule-row-inset-end. Example: rule-inset-end:0. It emits rule-inset-end:0;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (9)
0, 1, 1x, 2, [10%], [-5px], [2px], $inset, overlap-join
rule-overlap
Interactive example. Maturity: experimental. Browser support: CSS gap decorations are a draft feature with limited browser support.
Prefixes: rule-overlap. Example: rule-overlap:row-over-column. It emits rule-overlap:row-over-column;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (2)
row-over-column, column-over-row
rule-style
Interactive example. Maturity: experimental. Browser support: CSS gap decorations are a draft feature with limited browser support.
Vocabulary 1. Prefixes: rule-style. Example: rule-style:solid. It emits rule-style:solid;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (13)
solid, dashed, dotted, double, groove, ridge, inset, outset, hidden, none, [solid,_dashed], [repeat(auto,_solid,_dashed)],
$ruleStyle
Vocabulary 2. Prefixes: rule-column-style. Example: rule-column-style:solid. It emits column-rule-style:solid;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (13)
solid, dashed, dotted, double, groove, ridge, inset, outset, hidden, none, [solid,_dashed], [repeat(auto,_solid,_dashed)],
$ruleStyle
Vocabulary 3. Prefixes: rule-row-style. Example: rule-row-style:solid. It emits row-rule-style:solid;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (13)
solid, dashed, dotted, double, groove, ridge, inset, outset, hidden, none, [solid,_dashed], [repeat(auto,_solid,_dashed)],
$ruleStyle
rule-visibility-items
Interactive example. Maturity: experimental. Browser support: CSS gap decorations are a draft feature with limited browser support.
Vocabulary 1. Prefixes: rule-vis. Example: rule-vis:all. It emits rule-visibility-items:all;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
all, around, between, normal, $visibility
Vocabulary 2. Prefixes: rule-column-vis. Example: rule-column-vis:all. It emits column-rule-visibility-items:all;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
all, around, between, normal, $visibility
Vocabulary 3. Prefixes: rule-row-vis. Example: rule-row-vis:all. It emits row-rule-visibility-items:all;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
all, around, between, normal, $visibility
rule-width
Interactive example. Maturity: experimental. Browser support: CSS gap decorations are a draft feature with limited browser support.
Vocabulary 1. Prefixes: rule-width. Example: rule-width:thin. It emits rule-width:thin;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (8)
thin, medium, thick, 1, 2, [1px,_2px], [repeat(2,_1px,_3px)], $ruleWidth
Vocabulary 2. Prefixes: rule-column-width. Example: rule-column-width:thin. It emits column-rule-width:thin;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (8)
thin, medium, thick, 1, 2, [1px,_2px], [repeat(2,_1px,_3px)], $ruleWidth
Vocabulary 3. Prefixes: rule-row-width. Example: rule-row-width:thin. It emits row-rule-width:thin;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (8)
thin, medium, thick, 1, 2, [1px,_2px], [repeat(2,_1px,_3px)], $ruleWidth