/* GENERATED by chrome-testing/cmd/gen — do not edit by hand. Every value below is derived from the CSS EBNF grammar via the gluon v2 parser + proto reflection. Representative samples are used ONLY at the open-ended leaf types (length/number/color-token/…); all composites are walked. The frontend renders purely from window.CODEX. */ (function () { const v = (value, css, label) => ({ value, css, note: "", label: label || value }); const families = [ { id: "box-display", sigil: "01", title: "Box Model \u0026 Display", blurb: "How a box is generated and what formatting context it makes.", demo: "generic", sampleKind: "box", group: "families", focus: false, gallery: false, count: 9, properties: [ { number: 1, name: "clear", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eclear\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets whether an element must be moved below (cleared) \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/float\"\u003efloating\u003c/a\u003e elements that precede it. The \u003ccode\u003eclear\u003c/code\u003e property applies to floating and non-floating elements.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"inline-start\" | \"inline-end\" | \"block-start\" | \"block-end\" | \"left\" | \"right\" | \"top\" | \"bottom\" | \"both-inline\" | \"both-block\" | \"both\" | \"none\"", ebnf: "clear =\n \"inline-start\" | \"inline-end\" | \"block-start\" | \"block-end\" | \"left\" | \"right\" | \"top\" | \"bottom\" | \"both-inline\" | \"both-block\" | \"both\" | \"none\"", valueType: "keyword", defaultValue: "inline-end", related: [], provenance: "pure", truncated: false, trueCount: 12, shown: 12, assists: [], values: [ v("inline-start", "clear: inline-start;"), v("inline-end", "clear: inline-end;"), v("block-start", "clear: block-start;"), v("block-end", "clear: block-end;"), v("left", "clear: left;"), v("right", "clear: right;"), v("top", "clear: top;"), v("bottom", "clear: bottom;"), v("both-inline", "clear: both-inline;"), v("both-block", "clear: both-block;"), v("both", "clear: both;"), v("none", "clear: none;"), ], }, { number: 2, name: "display", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003edisplay\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets whether an element is treated as a \u003ca href=\"/en-US/docs/Web/CSS/Guides/Display/Flow_layout\"\u003eblock or inline box\u003c/a\u003e and the layout used for its children, such as \u003ca href=\"/en-US/docs/Web/CSS/Guides/Display/Flow_layout\"\u003eflow layout\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Guides/Grid_layout\"\u003egrid\u003c/a\u003e or \u003ca href=\"/en-US/docs/Web/CSS/Guides/Flexible_box_layout\"\u003eflex\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "( [ DisplayOutsideType ] , [ DisplayInsideType ] ) | DisplayListitemType | DisplayInternalType | DisplayBoxType | DisplayLegacyType | \"grid-lanes\" | \"inline-grid-lanes\" | [ DisplayOutsideType ] , [ ( DisplayInsideType | \"math\" ) ]", ebnf: "display =\n ( [ DisplayOutsideType ] , [ DisplayInsideType ] ) | DisplayListitemType | DisplayInternalType | DisplayBoxType | DisplayLegacyType | \"grid-lanes\" | \"inline-grid-lanes\" | [ DisplayOutsideType ] , [ ( DisplayInsideType | \"math\" ) ]", valueType: "keyword", defaultValue: "block flow-root", related: [], provenance: "pure", truncated: false, trueCount: 63, shown: 50, assists: [], values: [ v("block flow", "display: block flow;"), v("block flow-root", "display: block flow-root;"), v("block table", "display: block table;"), v("block flex", "display: block flex;"), v("block grid", "display: block grid;"), v("block ruby", "display: block ruby;"), v("block", "display: block;"), v("inline flow", "display: inline flow;"), v("inline flow-root", "display: inline flow-root;"), v("inline table", "display: inline table;"), v("inline flex", "display: inline flex;"), v("inline grid", "display: inline grid;"), v("inline ruby", "display: inline ruby;"), v("inline", "display: inline;"), v("run-in flow", "display: run-in flow;"), v("run-in flow-root", "display: run-in flow-root;"), v("run-in table", "display: run-in table;"), v("run-in flex", "display: run-in flex;"), v("run-in grid", "display: run-in grid;"), v("run-in ruby", "display: run-in ruby;"), v("run-in", "display: run-in;"), v("flow", "display: flow;"), v("flow-root", "display: flow-root;"), v("table", "display: table;"), v("flex", "display: flex;"), v("grid", "display: grid;"), v("ruby", "display: ruby;"), v("block flow list-item", "display: block flow list-item;"), v("block flow-root list-item", "display: block flow-root list-item;"), v("block list-item", "display: block list-item;"), v("inline flow list-item", "display: inline flow list-item;"), v("inline flow-root list-item", "display: inline flow-root list-item;"), v("inline list-item", "display: inline list-item;"), v("run-in flow list-item", "display: run-in flow list-item;"), v("run-in flow-root list-item", "display: run-in flow-root list-item;"), v("run-in list-item", "display: run-in list-item;"), v("flow list-item", "display: flow list-item;"), v("flow-root list-item", "display: flow-root list-item;"), v("list-item", "display: list-item;"), v("table-row-group", "display: table-row-group;"), v("table-header-group", "display: table-header-group;"), v("table-footer-group", "display: table-footer-group;"), v("table-row", "display: table-row;"), v("table-cell", "display: table-cell;"), v("table-column-group", "display: table-column-group;"), v("table-column", "display: table-column;"), v("table-caption", "display: table-caption;"), v("ruby-base", "display: ruby-base;"), v("ruby-text", "display: ruby-text;"), v("ruby-base-container", "display: ruby-base-container;"), ], }, { number: 3, name: "float", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efloat\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/position#absolute_positioning\"\u003eabsolute positioning\u003c/a\u003e).", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"block-start\" | \"block-end\" | \"inline-start\" | \"inline-end\" | \"snap-block\" | SnapBlockFn | \"snap-inline\" | SnapInlineFn | \"left\" | \"right\" | \"top\" | \"bottom\" | \"none\" | \"footnote\"", ebnf: "float =\n \"block-start\" | \"block-end\" | \"inline-start\" | \"inline-end\" | \"snap-block\" | SnapBlockFn | \"snap-inline\" | SnapInlineFn | \"left\" | \"right\" | \"top\" | \"bottom\" | \"none\" | \"footnote\"", valueType: "keyword", defaultValue: "block-end", related: [], provenance: "assisted", truncated: false, trueCount: 14, shown: 14, assists: [{ type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("block-start", "float: block-start;"), v("block-end", "float: block-end;"), v("inline-start", "float: inline-start;"), v("inline-end", "float: inline-end;"), v("snap-block", "float: snap-block;"), v("snap-block(24px, start)", "float: snap-block(24px, start);"), v("snap-inline", "float: snap-inline;"), v("snap-inline(24px, left)", "float: snap-inline(24px, left);"), v("left", "float: left;"), v("right", "float: right;"), v("top", "float: top;"), v("bottom", "float: bottom;"), v("none", "float: none;"), v("footnote", "float: footnote;"), ], }, { number: 4, name: "overflow", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eoverflow\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e sets the desired behavior when content does not fit in the element's padding box (overflows) in the horizontal and/or vertical direction.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "OverflowBlockProp , [ OverflowBlockProp ]", ebnf: "overflow =\n OverflowBlockProp , [ OverflowBlockProp ]", valueType: "keyword", defaultValue: "hidden", related: [], provenance: "pure", truncated: false, trueCount: 6, shown: 6, assists: [], values: [ v("visible", "overflow: visible;"), v("hidden", "overflow: hidden;"), v("clip", "overflow: clip;"), v("scroll", "overflow: scroll;"), v("auto", "overflow: auto;"), v("overlay", "overflow: overlay;"), ], }, { number: 5, name: "overflow-anchor", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eoverflow-anchor\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property provides a way to opt out of the browser's scroll anchoring behavior, which adjusts scroll position to minimize content shifts.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"none\"", ebnf: "overflow-anchor =\n \"auto\" | \"none\"", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("auto", "overflow-anchor: auto;"), v("none", "overflow-anchor: none;"), ], }, { number: 6, name: "overflow-block", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eoverflow-block\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets what shows when content overflows the block start and block end edges of a box. This may be nothing, a scroll bar, or the overflow content.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"visible\" | \"hidden\" | \"clip\" | \"scroll\" | \"auto\" | \"overlay\"", ebnf: "overflow-block =\n \"visible\" | \"hidden\" | \"clip\" | \"scroll\" | \"auto\" | \"overlay\"", valueType: "keyword", defaultValue: "hidden", related: [], provenance: "pure", truncated: false, trueCount: 6, shown: 6, assists: [], values: [ v("visible", "overflow-block: visible;"), v("hidden", "overflow-block: hidden;"), v("clip", "overflow-block: clip;"), v("scroll", "overflow-block: scroll;"), v("auto", "overflow-block: auto;"), v("overlay", "overflow-block: overlay;"), ], }, { number: 7, name: "overflow-clip-margin", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eoverflow-clip-margin\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property determines how far outside its bounds an element with \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/overflow\"\u003e\u003ccode\u003eoverflow: clip\u003c/code\u003e\u003c/a\u003e may be painted before being clipped. The bound defined by this property is called the \u003cem\u003eoverflow clip edge\u003c/em\u003e of the box.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "VisualBoxType , [ non_negative_length_type ] | non_negative_length_type , [ VisualBoxType ]", ebnf: "overflow-clip-margin =\n VisualBoxType , [ non_negative_length_type ] | non_negative_length_type , [ VisualBoxType ]", valueType: "length", defaultValue: "content-box 48px", related: [], provenance: "assisted", truncated: false, trueCount: 38, shown: 38, assists: [{ type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("content-box 24px", "overflow-clip-margin: content-box 24px;"), v("content-box 48px", "overflow-clip-margin: content-box 48px;"), v("content-box 8px", "overflow-clip-margin: content-box 8px;"), v("content-box 16px", "overflow-clip-margin: content-box 16px;"), v("content-box 64px", "overflow-clip-margin: content-box 64px;"), v("content-box", "overflow-clip-margin: content-box;"), v("padding-box 24px", "overflow-clip-margin: padding-box 24px;"), v("padding-box 48px", "overflow-clip-margin: padding-box 48px;"), v("padding-box 8px", "overflow-clip-margin: padding-box 8px;"), v("padding-box 16px", "overflow-clip-margin: padding-box 16px;"), v("padding-box 64px", "overflow-clip-margin: padding-box 64px;"), v("padding-box", "overflow-clip-margin: padding-box;"), v("border-box 24px", "overflow-clip-margin: border-box 24px;"), v("border-box 48px", "overflow-clip-margin: border-box 48px;"), v("border-box 8px", "overflow-clip-margin: border-box 8px;"), v("border-box 16px", "overflow-clip-margin: border-box 16px;"), v("border-box 64px", "overflow-clip-margin: border-box 64px;"), v("border-box", "overflow-clip-margin: border-box;"), v("24px content-box", "overflow-clip-margin: 24px content-box;"), v("24px padding-box", "overflow-clip-margin: 24px padding-box;"), v("24px border-box", "overflow-clip-margin: 24px border-box;"), v("24px", "overflow-clip-margin: 24px;"), v("48px content-box", "overflow-clip-margin: 48px content-box;"), v("48px padding-box", "overflow-clip-margin: 48px padding-box;"), v("48px border-box", "overflow-clip-margin: 48px border-box;"), v("48px", "overflow-clip-margin: 48px;"), v("8px content-box", "overflow-clip-margin: 8px content-box;"), v("8px padding-box", "overflow-clip-margin: 8px padding-box;"), v("8px border-box", "overflow-clip-margin: 8px border-box;"), v("8px", "overflow-clip-margin: 8px;"), v("16px content-box", "overflow-clip-margin: 16px content-box;"), v("16px padding-box", "overflow-clip-margin: 16px padding-box;"), v("16px border-box", "overflow-clip-margin: 16px border-box;"), v("16px", "overflow-clip-margin: 16px;"), v("64px content-box", "overflow-clip-margin: 64px content-box;"), v("64px padding-box", "overflow-clip-margin: 64px padding-box;"), v("64px border-box", "overflow-clip-margin: 64px border-box;"), v("64px", "overflow-clip-margin: 64px;"), ], }, { number: 8, name: "overflow-inline", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eoverflow-inline\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets what shows when content overflows the inline start and end edges of a box. This may be nothing, a scroll bar, or the overflow content.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"visible\" | \"hidden\" | \"clip\" | \"scroll\" | \"auto\"", ebnf: "overflow-inline =\n \"visible\" | \"hidden\" | \"clip\" | \"scroll\" | \"auto\"", valueType: "keyword", defaultValue: "hidden", related: [], provenance: "pure", truncated: false, trueCount: 5, shown: 5, assists: [], values: [ v("visible", "overflow-inline: visible;"), v("hidden", "overflow-inline: hidden;"), v("clip", "overflow-inline: clip;"), v("scroll", "overflow-inline: scroll;"), v("auto", "overflow-inline: auto;"), ], }, { number: 9, name: "visibility", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003evisibility\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a \u003ca href=\"/en-US/docs/Web/HTML/Reference/Elements/table\"\u003e\u003ccode\u003e\u0026lt;table\u0026gt;\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"visible\" | \"hidden\" | \"force-hidden\" | \"collapse\"", ebnf: "visibility =\n \"visible\" | \"hidden\" | \"force-hidden\" | \"collapse\"", valueType: "keyword", defaultValue: "hidden", related: [], provenance: "pure", truncated: false, trueCount: 4, shown: 4, assists: [], values: [ v("visible", "visibility: visible;"), v("hidden", "visibility: hidden;"), v("force-hidden", "visibility: force-hidden;"), v("collapse", "visibility: collapse;"), ], }, ], }, { id: "positioning", sigil: "02", title: "Positioning \u0026 Inset", blurb: "Offsets that place a positioned box relative to its containing block.", demo: "generic", sampleKind: "box", group: "families", focus: false, gallery: false, count: 13, properties: [ { number: 10, name: "bottom", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebottom\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property participates in setting the vertical position of a \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/position\"\u003epositioned element\u003c/a\u003e. This \u003ca href=\"/en-US/docs/Glossary/Inset_properties\"\u003einset property\u003c/a\u003e has no effect on non-positioned elements.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | LengthPercentageType | AnchorFn | AnchorSizeFn", ebnf: "bottom =\n \"auto\" | LengthPercentageType | AnchorFn | AnchorSizeFn", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 22, shown: 22, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "bottom: auto;"), v("24px", "bottom: 24px;"), v("48px", "bottom: 48px;"), v("8px", "bottom: 8px;"), v("16px", "bottom: 16px;"), v("64px", "bottom: 64px;"), v("50%", "bottom: 50%;"), v("80%", "bottom: 80%;"), v("30%", "bottom: 30%;"), v("65%", "bottom: 65%;"), v("15%", "bottom: 15%;"), v("100%", "bottom: 100%;"), v("calc(24px)", "bottom: calc(24px);"), v("clamp(24px, 2em, 48px)", "bottom: clamp(24px, 2em, 48px);"), v("min(24px)", "bottom: min(24px);"), v("max(24px)", "bottom: max(24px);"), v("round(nearest, 24px, 2em)", "bottom: round(nearest, 24px, 2em);"), v("abs(24px)", "bottom: abs(24px);"), v("var(--my-var, 48px)", "bottom: var(--my-var, 48px);"), v("env(my-ident, 48px)", "bottom: env(my-ident, 48px);"), v("anchor(--my-var inside, 8px)", "bottom: anchor(--my-var inside, 8px);"), v("anchor-size(--my-var width, 48px)", "bottom: anchor-size(--my-var width, 48px);"), ], }, { number: 11, name: "inset", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003einset\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property is a shorthand that corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/top\"\u003e\u003ccode\u003etop\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/right\"\u003e\u003ccode\u003eright\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/bottom\"\u003e\u003ccode\u003ebottom\u003c/code\u003e\u003c/a\u003e, and/or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/left\"\u003e\u003ccode\u003eleft\u003c/code\u003e\u003c/a\u003e properties. It has the same multi-value syntax of the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/margin\"\u003e\u003ccode\u003emargin\u003c/code\u003e\u003c/a\u003e shorthand.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "TopProp , [ TopProp ] , [ TopProp ] , [ TopProp ]", ebnf: "inset =\n TopProp , [ TopProp ] , [ TopProp ] , [ TopProp ]", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 22, shown: 22, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "inset: auto;"), v("24px", "inset: 24px;"), v("48px", "inset: 48px;"), v("8px", "inset: 8px;"), v("16px", "inset: 16px;"), v("64px", "inset: 64px;"), v("50%", "inset: 50%;"), v("80%", "inset: 80%;"), v("30%", "inset: 30%;"), v("65%", "inset: 65%;"), v("15%", "inset: 15%;"), v("100%", "inset: 100%;"), v("calc(24px)", "inset: calc(24px);"), v("clamp(24px, 2em, 48px)", "inset: clamp(24px, 2em, 48px);"), v("min(24px)", "inset: min(24px);"), v("max(24px)", "inset: max(24px);"), v("round(nearest, 24px, 2em)", "inset: round(nearest, 24px, 2em);"), v("abs(24px)", "inset: abs(24px);"), v("var(--my-var, 48px)", "inset: var(--my-var, 48px);"), v("env(my-ident, 48px)", "inset: env(my-ident, 48px);"), v("anchor(--my-var inside, 8px)", "inset: anchor(--my-var inside, 8px);"), v("anchor-size(--my-var width, 48px)", "inset: anchor-size(--my-var width, 48px);"), ], }, { number: 12, name: "inset-block", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003einset-block\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the logical block start and end offsets of an element, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. It corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/top\"\u003e\u003ccode\u003etop\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/bottom\"\u003e\u003ccode\u003ebottom\u003c/code\u003e\u003c/a\u003e, or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/right\"\u003e\u003ccode\u003eright\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/left\"\u003e\u003ccode\u003eleft\u003c/code\u003e\u003c/a\u003e properties depending on the values defined for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "TopProp , [ TopProp ]", ebnf: "inset-block =\n TopProp , [ TopProp ]", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 22, shown: 22, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "inset-block: auto;"), v("24px", "inset-block: 24px;"), v("48px", "inset-block: 48px;"), v("8px", "inset-block: 8px;"), v("16px", "inset-block: 16px;"), v("64px", "inset-block: 64px;"), v("50%", "inset-block: 50%;"), v("80%", "inset-block: 80%;"), v("30%", "inset-block: 30%;"), v("65%", "inset-block: 65%;"), v("15%", "inset-block: 15%;"), v("100%", "inset-block: 100%;"), v("calc(24px)", "inset-block: calc(24px);"), v("clamp(24px, 2em, 48px)", "inset-block: clamp(24px, 2em, 48px);"), v("min(24px)", "inset-block: min(24px);"), v("max(24px)", "inset-block: max(24px);"), v("round(nearest, 24px, 2em)", "inset-block: round(nearest, 24px, 2em);"), v("abs(24px)", "inset-block: abs(24px);"), v("var(--my-var, 48px)", "inset-block: var(--my-var, 48px);"), v("env(my-ident, 48px)", "inset-block: env(my-ident, 48px);"), v("anchor(--my-var inside, 8px)", "inset-block: anchor(--my-var inside, 8px);"), v("anchor-size(--my-var width, 48px)", "inset-block: anchor-size(--my-var width, 48px);"), ], }, { number: 13, name: "inset-block-end", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003einset-block-end\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the logical block end offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. It corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/top\"\u003e\u003ccode\u003etop\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/right\"\u003e\u003ccode\u003eright\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/bottom\"\u003e\u003ccode\u003ebottom\u003c/code\u003e\u003c/a\u003e, or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/left\"\u003e\u003ccode\u003eleft\u003c/code\u003e\u003c/a\u003e property depending on the values defined for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | LengthPercentageType", ebnf: "inset-block-end =\n \"auto\" | LengthPercentageType", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 20, shown: 20, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "inset-block-end: auto;"), v("24px", "inset-block-end: 24px;"), v("48px", "inset-block-end: 48px;"), v("8px", "inset-block-end: 8px;"), v("16px", "inset-block-end: 16px;"), v("64px", "inset-block-end: 64px;"), v("50%", "inset-block-end: 50%;"), v("80%", "inset-block-end: 80%;"), v("30%", "inset-block-end: 30%;"), v("65%", "inset-block-end: 65%;"), v("15%", "inset-block-end: 15%;"), v("100%", "inset-block-end: 100%;"), v("calc(24px)", "inset-block-end: calc(24px);"), v("clamp(24px, 2em, 48px)", "inset-block-end: clamp(24px, 2em, 48px);"), v("min(24px)", "inset-block-end: min(24px);"), v("max(24px)", "inset-block-end: max(24px);"), v("round(nearest, 24px, 2em)", "inset-block-end: round(nearest, 24px, 2em);"), v("abs(24px)", "inset-block-end: abs(24px);"), v("var(--my-var, 48px)", "inset-block-end: var(--my-var, 48px);"), v("env(my-ident, 48px)", "inset-block-end: env(my-ident, 48px);"), ], }, { number: 14, name: "inset-block-start", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003einset-block-start\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the logical block start offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. It corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/top\"\u003e\u003ccode\u003etop\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/right\"\u003e\u003ccode\u003eright\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/bottom\"\u003e\u003ccode\u003ebottom\u003c/code\u003e\u003c/a\u003e, or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/left\"\u003e\u003ccode\u003eleft\u003c/code\u003e\u003c/a\u003e property depending on the values defined for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | LengthPercentageType", ebnf: "inset-block-start =\n \"auto\" | LengthPercentageType", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 20, shown: 20, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "inset-block-start: auto;"), v("24px", "inset-block-start: 24px;"), v("48px", "inset-block-start: 48px;"), v("8px", "inset-block-start: 8px;"), v("16px", "inset-block-start: 16px;"), v("64px", "inset-block-start: 64px;"), v("50%", "inset-block-start: 50%;"), v("80%", "inset-block-start: 80%;"), v("30%", "inset-block-start: 30%;"), v("65%", "inset-block-start: 65%;"), v("15%", "inset-block-start: 15%;"), v("100%", "inset-block-start: 100%;"), v("calc(24px)", "inset-block-start: calc(24px);"), v("clamp(24px, 2em, 48px)", "inset-block-start: clamp(24px, 2em, 48px);"), v("min(24px)", "inset-block-start: min(24px);"), v("max(24px)", "inset-block-start: max(24px);"), v("round(nearest, 24px, 2em)", "inset-block-start: round(nearest, 24px, 2em);"), v("abs(24px)", "inset-block-start: abs(24px);"), v("var(--my-var, 48px)", "inset-block-start: var(--my-var, 48px);"), v("env(my-ident, 48px)", "inset-block-start: env(my-ident, 48px);"), ], }, { number: 15, name: "inset-inline", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003einset-inline\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the logical start and end offsets of an element in the inline direction, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. It corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/top\"\u003e\u003ccode\u003etop\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/bottom\"\u003e\u003ccode\u003ebottom\u003c/code\u003e\u003c/a\u003e, or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/right\"\u003e\u003ccode\u003eright\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/left\"\u003e\u003ccode\u003eleft\u003c/code\u003e\u003c/a\u003e properties depending on the values defined for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "TopProp , [ TopProp ]", ebnf: "inset-inline =\n TopProp , [ TopProp ]", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 22, shown: 22, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "inset-inline: auto;"), v("24px", "inset-inline: 24px;"), v("48px", "inset-inline: 48px;"), v("8px", "inset-inline: 8px;"), v("16px", "inset-inline: 16px;"), v("64px", "inset-inline: 64px;"), v("50%", "inset-inline: 50%;"), v("80%", "inset-inline: 80%;"), v("30%", "inset-inline: 30%;"), v("65%", "inset-inline: 65%;"), v("15%", "inset-inline: 15%;"), v("100%", "inset-inline: 100%;"), v("calc(24px)", "inset-inline: calc(24px);"), v("clamp(24px, 2em, 48px)", "inset-inline: clamp(24px, 2em, 48px);"), v("min(24px)", "inset-inline: min(24px);"), v("max(24px)", "inset-inline: max(24px);"), v("round(nearest, 24px, 2em)", "inset-inline: round(nearest, 24px, 2em);"), v("abs(24px)", "inset-inline: abs(24px);"), v("var(--my-var, 48px)", "inset-inline: var(--my-var, 48px);"), v("env(my-ident, 48px)", "inset-inline: env(my-ident, 48px);"), v("anchor(--my-var inside, 8px)", "inset-inline: anchor(--my-var inside, 8px);"), v("anchor-size(--my-var width, 48px)", "inset-inline: anchor-size(--my-var width, 48px);"), ], }, { number: 16, name: "inset-inline-end", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003einset-inline-end\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the logical inline end inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. It corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/top\"\u003e\u003ccode\u003etop\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/right\"\u003e\u003ccode\u003eright\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/bottom\"\u003e\u003ccode\u003ebottom\u003c/code\u003e\u003c/a\u003e, or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/left\"\u003e\u003ccode\u003eleft\u003c/code\u003e\u003c/a\u003e property depending on the values defined for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | LengthPercentageType", ebnf: "inset-inline-end =\n \"auto\" | LengthPercentageType", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 20, shown: 20, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "inset-inline-end: auto;"), v("24px", "inset-inline-end: 24px;"), v("48px", "inset-inline-end: 48px;"), v("8px", "inset-inline-end: 8px;"), v("16px", "inset-inline-end: 16px;"), v("64px", "inset-inline-end: 64px;"), v("50%", "inset-inline-end: 50%;"), v("80%", "inset-inline-end: 80%;"), v("30%", "inset-inline-end: 30%;"), v("65%", "inset-inline-end: 65%;"), v("15%", "inset-inline-end: 15%;"), v("100%", "inset-inline-end: 100%;"), v("calc(24px)", "inset-inline-end: calc(24px);"), v("clamp(24px, 2em, 48px)", "inset-inline-end: clamp(24px, 2em, 48px);"), v("min(24px)", "inset-inline-end: min(24px);"), v("max(24px)", "inset-inline-end: max(24px);"), v("round(nearest, 24px, 2em)", "inset-inline-end: round(nearest, 24px, 2em);"), v("abs(24px)", "inset-inline-end: abs(24px);"), v("var(--my-var, 48px)", "inset-inline-end: var(--my-var, 48px);"), v("env(my-ident, 48px)", "inset-inline-end: env(my-ident, 48px);"), ], }, { number: 17, name: "inset-inline-start", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003einset-inline-start\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the logical inline start inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. It corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/top\"\u003e\u003ccode\u003etop\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/right\"\u003e\u003ccode\u003eright\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/bottom\"\u003e\u003ccode\u003ebottom\u003c/code\u003e\u003c/a\u003e, or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/left\"\u003e\u003ccode\u003eleft\u003c/code\u003e\u003c/a\u003e property depending on the values defined for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | LengthPercentageType", ebnf: "inset-inline-start =\n \"auto\" | LengthPercentageType", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 20, shown: 20, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "inset-inline-start: auto;"), v("24px", "inset-inline-start: 24px;"), v("48px", "inset-inline-start: 48px;"), v("8px", "inset-inline-start: 8px;"), v("16px", "inset-inline-start: 16px;"), v("64px", "inset-inline-start: 64px;"), v("50%", "inset-inline-start: 50%;"), v("80%", "inset-inline-start: 80%;"), v("30%", "inset-inline-start: 30%;"), v("65%", "inset-inline-start: 65%;"), v("15%", "inset-inline-start: 15%;"), v("100%", "inset-inline-start: 100%;"), v("calc(24px)", "inset-inline-start: calc(24px);"), v("clamp(24px, 2em, 48px)", "inset-inline-start: clamp(24px, 2em, 48px);"), v("min(24px)", "inset-inline-start: min(24px);"), v("max(24px)", "inset-inline-start: max(24px);"), v("round(nearest, 24px, 2em)", "inset-inline-start: round(nearest, 24px, 2em);"), v("abs(24px)", "inset-inline-start: abs(24px);"), v("var(--my-var, 48px)", "inset-inline-start: var(--my-var, 48px);"), v("env(my-ident, 48px)", "inset-inline-start: env(my-ident, 48px);"), ], }, { number: 18, name: "left", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eleft\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property participates in specifying the horizontal position of a \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/position\"\u003epositioned element\u003c/a\u003e. This \u003ca href=\"/en-US/docs/Glossary/Inset_properties\"\u003einset property\u003c/a\u003e has no effect on non-positioned elements.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | LengthPercentageType | AnchorFn | AnchorSizeFn", ebnf: "left =\n \"auto\" | LengthPercentageType | AnchorFn | AnchorSizeFn", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 22, shown: 22, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "left: auto;"), v("24px", "left: 24px;"), v("48px", "left: 48px;"), v("8px", "left: 8px;"), v("16px", "left: 16px;"), v("64px", "left: 64px;"), v("50%", "left: 50%;"), v("80%", "left: 80%;"), v("30%", "left: 30%;"), v("65%", "left: 65%;"), v("15%", "left: 15%;"), v("100%", "left: 100%;"), v("calc(24px)", "left: calc(24px);"), v("clamp(24px, 2em, 48px)", "left: clamp(24px, 2em, 48px);"), v("min(24px)", "left: min(24px);"), v("max(24px)", "left: max(24px);"), v("round(nearest, 24px, 2em)", "left: round(nearest, 24px, 2em);"), v("abs(24px)", "left: abs(24px);"), v("var(--my-var, 48px)", "left: var(--my-var, 48px);"), v("env(my-ident, 48px)", "left: env(my-ident, 48px);"), v("anchor(--my-var inside, 8px)", "left: anchor(--my-var inside, 8px);"), v("anchor-size(--my-var width, 48px)", "left: anchor-size(--my-var width, 48px);"), ], }, { number: 19, name: "position", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eposition\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets how an element is positioned in a document. The \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/top\"\u003e\u003ccode\u003etop\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/right\"\u003e\u003ccode\u003eright\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/bottom\"\u003e\u003ccode\u003ebottom\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/left\"\u003e\u003ccode\u003eleft\u003c/code\u003e\u003c/a\u003e physical properties and the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/inset-block-start\"\u003e\u003ccode\u003einset-block-start\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/inset-block-end\"\u003e\u003ccode\u003einset-block-end\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/inset-inline-start\"\u003e\u003ccode\u003einset-inline-start\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/inset-inline-end\"\u003e\u003ccode\u003einset-inline-end\u003c/code\u003e\u003c/a\u003e flow-relative logical properties can be used to determine the final location of positioned elements.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"static\" | \"relative\" | \"absolute\" | \"sticky\" | \"fixed\" | RunningFn", ebnf: "position =\n \"static\" | \"relative\" | \"absolute\" | \"sticky\" | \"fixed\" | RunningFn", valueType: "keyword", defaultValue: "relative", related: [], provenance: "assisted", truncated: false, trueCount: 6, shown: 6, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }], values: [ v("static", "position: static;"), v("relative", "position: relative;"), v("absolute", "position: absolute;"), v("sticky", "position: sticky;"), v("fixed", "position: fixed;"), v("running(my-ident)", "position: running(my-ident);"), ], }, { number: 20, name: "right", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eright\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property participates in specifying the horizontal position of a \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/position\"\u003epositioned element\u003c/a\u003e. This \u003ca href=\"/en-US/docs/Glossary/Inset_properties\"\u003einset property\u003c/a\u003e has no effect on non-positioned elements.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | LengthPercentageType | AnchorFn | AnchorSizeFn", ebnf: "right =\n \"auto\" | LengthPercentageType | AnchorFn | AnchorSizeFn", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 22, shown: 22, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "right: auto;"), v("24px", "right: 24px;"), v("48px", "right: 48px;"), v("8px", "right: 8px;"), v("16px", "right: 16px;"), v("64px", "right: 64px;"), v("50%", "right: 50%;"), v("80%", "right: 80%;"), v("30%", "right: 30%;"), v("65%", "right: 65%;"), v("15%", "right: 15%;"), v("100%", "right: 100%;"), v("calc(24px)", "right: calc(24px);"), v("clamp(24px, 2em, 48px)", "right: clamp(24px, 2em, 48px);"), v("min(24px)", "right: min(24px);"), v("max(24px)", "right: max(24px);"), v("round(nearest, 24px, 2em)", "right: round(nearest, 24px, 2em);"), v("abs(24px)", "right: abs(24px);"), v("var(--my-var, 48px)", "right: var(--my-var, 48px);"), v("env(my-ident, 48px)", "right: env(my-ident, 48px);"), v("anchor(--my-var inside, 8px)", "right: anchor(--my-var inside, 8px);"), v("anchor-size(--my-var width, 48px)", "right: anchor-size(--my-var width, 48px);"), ], }, { number: 21, name: "top", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etop\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the vertical position of a \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/position\"\u003epositioned element\u003c/a\u003e. This \u003ca href=\"/en-US/docs/Glossary/Inset_properties\"\u003einset property\u003c/a\u003e has no effect on non-positioned elements.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | LengthPercentageType | AnchorFn | AnchorSizeFn", ebnf: "top =\n \"auto\" | LengthPercentageType | AnchorFn | AnchorSizeFn", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 22, shown: 22, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "top: auto;"), v("24px", "top: 24px;"), v("48px", "top: 48px;"), v("8px", "top: 8px;"), v("16px", "top: 16px;"), v("64px", "top: 64px;"), v("50%", "top: 50%;"), v("80%", "top: 80%;"), v("30%", "top: 30%;"), v("65%", "top: 65%;"), v("15%", "top: 15%;"), v("100%", "top: 100%;"), v("calc(24px)", "top: calc(24px);"), v("clamp(24px, 2em, 48px)", "top: clamp(24px, 2em, 48px);"), v("min(24px)", "top: min(24px);"), v("max(24px)", "top: max(24px);"), v("round(nearest, 24px, 2em)", "top: round(nearest, 24px, 2em);"), v("abs(24px)", "top: abs(24px);"), v("var(--my-var, 48px)", "top: var(--my-var, 48px);"), v("env(my-ident, 48px)", "top: env(my-ident, 48px);"), v("anchor(--my-var inside, 8px)", "top: anchor(--my-var inside, 8px);"), v("anchor-size(--my-var width, 48px)", "top: anchor-size(--my-var width, 48px);"), ], }, { number: 22, name: "z-index", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ez-index\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the z-order of a \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/position\"\u003epositioned\u003c/a\u003e element and its descendants or flex and grid items. Overlapping elements with a larger z-index cover those with a smaller one.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "", ebnf: "", valueType: "number", defaultValue: "2", related: [], provenance: "assisted", truncated: false, trueCount: 7, shown: 7, assists: [{ type: "\u003cinteger\u003e", samples: ["2", "1", "3", "5", "4"] }], values: [ v("auto", "z-index: auto;"), v("2", "z-index: 2;"), v("1", "z-index: 1;"), v("3", "z-index: 3;"), v("5", "z-index: 5;"), v("4", "z-index: 4;"), v("inherit", "z-index: inherit;"), ], }, ], }, { id: "flexbox", sigil: "03", title: "Flexbox", blurb: "One-dimensional layout: where the slack goes along main and cross axes.", demo: "flex", sampleKind: "flex", group: "families", focus: true, gallery: false, count: 20, properties: [ { number: 23, name: "align-content", maturity: "modern", description: "The \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003cstrong\u003e\u003ccode\u003ealign-content\u003c/code\u003e\u003c/strong\u003e property sets the distribution of space between and around content items along a \u003ca href=\"/en-US/docs/Web/CSS/Guides/Flexible_box_layout\"\u003eflexbox\u003c/a\u003e's \u003ca href=\"/en-US/docs/Glossary/Cross_Axis\"\u003ecross axis\u003c/a\u003e, or a \u003ca href=\"/en-US/docs/Web/CSS/Guides/Grid_layout\"\u003egrid\u003c/a\u003e or \u003ca href=\"/en-US/docs/Glossary/Block-level_content\"\u003eblock-level\u003c/a\u003e element's block axis.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | BaselinePositionType | ContentDistributionType | [ OverflowPositionType ] , ContentPositionType", ebnf: "align-content =\n \"normal\" | BaselinePositionType | ContentDistributionType | [ OverflowPositionType ] , ContentPositionType", valueType: "keyword", defaultValue: "first baseline", related: [], provenance: "pure", truncated: false, trueCount: 23, shown: 23, assists: [], values: [ v("normal", "align-content: normal;"), v("first baseline", "align-content: first baseline;"), v("last baseline", "align-content: last baseline;"), v("baseline", "align-content: baseline;"), v("space-between", "align-content: space-between;"), v("space-around", "align-content: space-around;"), v("space-evenly", "align-content: space-evenly;"), v("stretch", "align-content: stretch;"), v("unsafe center", "align-content: unsafe center;"), v("unsafe start", "align-content: unsafe start;"), v("unsafe end", "align-content: unsafe end;"), v("unsafe flex-start", "align-content: unsafe flex-start;"), v("unsafe flex-end", "align-content: unsafe flex-end;"), v("safe center", "align-content: safe center;"), v("safe start", "align-content: safe start;"), v("safe end", "align-content: safe end;"), v("safe flex-start", "align-content: safe flex-start;"), v("safe flex-end", "align-content: safe flex-end;"), v("center", "align-content: center;"), v("start", "align-content: start;"), v("end", "align-content: end;"), v("flex-start", "align-content: flex-start;"), v("flex-end", "align-content: flex-end;"), ], }, { number: 24, name: "align-items", maturity: "modern", description: "The \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003cstrong\u003e\u003ccode\u003ealign-items\u003c/code\u003e\u003c/strong\u003e property sets the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/align-self\"\u003e\u003ccode\u003ealign-self\u003c/code\u003e\u003c/a\u003e value on all direct children as a group. In flexbox, it controls the alignment of items on the \u003ca href=\"/en-US/docs/Glossary/Cross_Axis\"\u003ecross axis\u003c/a\u003e. In grid layout, it controls the alignment of items on the block axis within their \u003ca href=\"/en-US/docs/Glossary/Grid_Areas\"\u003egrid areas\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | \"stretch\" | BaselinePositionType | [ OverflowPositionType ] , SelfPositionType", ebnf: "align-items =\n \"normal\" | \"stretch\" | BaselinePositionType | [ OverflowPositionType ] , SelfPositionType", valueType: "keyword", defaultValue: "stretch", related: [], provenance: "pure", truncated: false, trueCount: 26, shown: 26, assists: [], values: [ v("normal", "align-items: normal;"), v("stretch", "align-items: stretch;"), v("first baseline", "align-items: first baseline;"), v("last baseline", "align-items: last baseline;"), v("baseline", "align-items: baseline;"), v("unsafe center", "align-items: unsafe center;"), v("unsafe start", "align-items: unsafe start;"), v("unsafe end", "align-items: unsafe end;"), v("unsafe self-start", "align-items: unsafe self-start;"), v("unsafe self-end", "align-items: unsafe self-end;"), v("unsafe flex-start", "align-items: unsafe flex-start;"), v("unsafe flex-end", "align-items: unsafe flex-end;"), v("safe center", "align-items: safe center;"), v("safe start", "align-items: safe start;"), v("safe end", "align-items: safe end;"), v("safe self-start", "align-items: safe self-start;"), v("safe self-end", "align-items: safe self-end;"), v("safe flex-start", "align-items: safe flex-start;"), v("safe flex-end", "align-items: safe flex-end;"), v("center", "align-items: center;"), v("start", "align-items: start;"), v("end", "align-items: end;"), v("self-start", "align-items: self-start;"), v("self-end", "align-items: self-end;"), v("flex-start", "align-items: flex-start;"), v("flex-end", "align-items: flex-end;"), ], }, { number: 25, name: "align-self", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ealign-self\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property overrides a grid or flex item's \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/align-items\"\u003e\u003ccode\u003ealign-items\u003c/code\u003e\u003c/a\u003e value. In grid, it aligns the item inside the \u003ca href=\"/en-US/docs/Glossary/Grid_Areas\"\u003egrid area\u003c/a\u003e. In flexbox, it aligns the item on the \u003ca href=\"/en-US/docs/Glossary/Cross_Axis\"\u003ecross axis\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | [ OverflowPositionType ] , ( \"normal\" | SelfPositionType ) | \"stretch\" | BaselinePositionType | \"anchor-center\"", ebnf: "align-self =\n \"auto\" | [ OverflowPositionType ] , ( \"normal\" | SelfPositionType ) | \"stretch\" | BaselinePositionType | \"anchor-center\"", valueType: "keyword", defaultValue: "unsafe normal", related: [], provenance: "pure", truncated: false, trueCount: 30, shown: 30, assists: [], values: [ v("auto", "align-self: auto;"), v("unsafe normal", "align-self: unsafe normal;"), v("unsafe center", "align-self: unsafe center;"), v("unsafe start", "align-self: unsafe start;"), v("unsafe end", "align-self: unsafe end;"), v("unsafe self-start", "align-self: unsafe self-start;"), v("unsafe self-end", "align-self: unsafe self-end;"), v("unsafe flex-start", "align-self: unsafe flex-start;"), v("unsafe flex-end", "align-self: unsafe flex-end;"), v("safe normal", "align-self: safe normal;"), v("safe center", "align-self: safe center;"), v("safe start", "align-self: safe start;"), v("safe end", "align-self: safe end;"), v("safe self-start", "align-self: safe self-start;"), v("safe self-end", "align-self: safe self-end;"), v("safe flex-start", "align-self: safe flex-start;"), v("safe flex-end", "align-self: safe flex-end;"), v("normal", "align-self: normal;"), v("center", "align-self: center;"), v("start", "align-self: start;"), v("end", "align-self: end;"), v("self-start", "align-self: self-start;"), v("self-end", "align-self: self-end;"), v("flex-start", "align-self: flex-start;"), v("flex-end", "align-self: flex-end;"), v("stretch", "align-self: stretch;"), v("first baseline", "align-self: first baseline;"), v("last baseline", "align-self: last baseline;"), v("baseline", "align-self: baseline;"), v("anchor-center", "align-self: anchor-center;"), ], }, { number: 26, name: "column-gap", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecolumn-gap\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the size of the gap (\u003ca href=\"/en-US/docs/Glossary/Gutters\"\u003egutter\u003c/a\u003e) between an element's columns.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | NonNegativeLengthPercentageType | LineWidthType", ebnf: "column-gap =\n \"normal\" | NonNegativeLengthPercentageType | LineWidthType", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 22, shown: 22, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("normal", "column-gap: normal;"), v("24px", "column-gap: 24px;"), v("48px", "column-gap: 48px;"), v("8px", "column-gap: 8px;"), v("16px", "column-gap: 16px;"), v("64px", "column-gap: 64px;"), v("50%", "column-gap: 50%;"), v("80%", "column-gap: 80%;"), v("30%", "column-gap: 30%;"), v("65%", "column-gap: 65%;"), v("15%", "column-gap: 15%;"), v("100%", "column-gap: 100%;"), v("calc(24px)", "column-gap: calc(24px);"), v("clamp(24px, 2em, 48px)", "column-gap: clamp(24px, 2em, 48px);"), v("min(24px)", "column-gap: min(24px);"), v("max(24px)", "column-gap: max(24px);"), v("round(nearest, 24px, 2em)", "column-gap: round(nearest, 24px, 2em);"), v("abs(24px)", "column-gap: abs(24px);"), v("env(my-ident, 48px)", "column-gap: env(my-ident, 48px);"), v("thin", "column-gap: thin;"), v("medium", "column-gap: medium;"), v("thick", "column-gap: thick;"), ], }, { number: 27, name: "flex", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eflex\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e sets how a \u003ca href=\"/en-US/docs/Glossary/Flex_Item\"\u003eflex item\u003c/a\u003e will grow or shrink to fit the space available in its flex container.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\"\n | FlexGrowProp , FlexShrinkProp , FlexBasisProp\n | FlexGrowProp , FlexShrinkProp\n | FlexGrowProp , FlexBasisProp\n | FlexBasisProp\n | FlexGrowProp", ebnf: "flex =\n \"none\"\n | FlexGrowProp , FlexShrinkProp , FlexBasisProp\n | FlexGrowProp , FlexShrinkProp\n | FlexGrowProp , FlexBasisProp\n | FlexBasisProp\n | FlexGrowProp", valueType: "length", defaultValue: "1 1 content", related: [], provenance: "assisted", truncated: true, trueCount: 326, shown: 50, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber [0,∞]\u003e", samples: ["1", "2", "0.5", "0.75", "0.25"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("none", "flex: none;"), v("1 1 content", "flex: 1 1 content;"), v("1 1 auto", "flex: 1 1 auto;"), v("1 1 24px", "flex: 1 1 24px;"), v("1 1 48px", "flex: 1 1 48px;"), v("1 1 8px", "flex: 1 1 8px;"), v("1 1 16px", "flex: 1 1 16px;"), v("1 1 64px", "flex: 1 1 64px;"), v("1 1 50%", "flex: 1 1 50%;"), v("1 1 80%", "flex: 1 1 80%;"), v("1 1 30%", "flex: 1 1 30%;"), v("1 1 65%", "flex: 1 1 65%;"), v("1 1 15%", "flex: 1 1 15%;"), v("1 1 100%", "flex: 1 1 100%;"), v("1 1 calc(24px)", "flex: 1 1 calc(24px);"), v("1 1 clamp(24px, 2em, 48px)", "flex: 1 1 clamp(24px, 2em, 48px);"), v("1 1 min(24px)", "flex: 1 1 min(24px);"), v("1 1 max(24px)", "flex: 1 1 max(24px);"), v("1 1 round(nearest, 24px, 2em)", "flex: 1 1 round(nearest, 24px, 2em);"), v("1 1 abs(24px)", "flex: 1 1 abs(24px);"), v("1 1 env(my-ident, 48px)", "flex: 1 1 env(my-ident, 48px);"), v("1 1 min-content", "flex: 1 1 min-content;"), v("1 1 max-content", "flex: 1 1 max-content;"), v("1 1 fit-content(24px)", "flex: 1 1 fit-content(24px);"), v("1 1 calc-size(auto, 2em)", "flex: 1 1 calc-size(auto, 2em);"), v("1 1 anchor-size(--my-var width, 48px)", "flex: 1 1 anchor-size(--my-var width, 48px);"), v("1 1 stretch", "flex: 1 1 stretch;"), v("1 1 fit-content", "flex: 1 1 fit-content;"), v("1 1 contain", "flex: 1 1 contain;"), v("1 2 content", "flex: 1 2 content;"), v("1 2 auto", "flex: 1 2 auto;"), v("1 2 24px", "flex: 1 2 24px;"), v("1 2 48px", "flex: 1 2 48px;"), v("1 2 8px", "flex: 1 2 8px;"), v("1 2 16px", "flex: 1 2 16px;"), v("1 2 64px", "flex: 1 2 64px;"), v("1 2 50%", "flex: 1 2 50%;"), v("1 2 80%", "flex: 1 2 80%;"), v("1 2 30%", "flex: 1 2 30%;"), v("1 2 65%", "flex: 1 2 65%;"), v("1 2 15%", "flex: 1 2 15%;"), v("1 2 100%", "flex: 1 2 100%;"), v("1 2 calc(24px)", "flex: 1 2 calc(24px);"), v("1 2 clamp(24px, 2em, 48px)", "flex: 1 2 clamp(24px, 2em, 48px);"), v("1 2 min(24px)", "flex: 1 2 min(24px);"), v("1 2 max(24px)", "flex: 1 2 max(24px);"), v("1 2 round(nearest, 24px, 2em)", "flex: 1 2 round(nearest, 24px, 2em);"), v("1 2 abs(24px)", "flex: 1 2 abs(24px);"), v("1 2 env(my-ident, 48px)", "flex: 1 2 env(my-ident, 48px);"), v("1 2 min-content", "flex: 1 2 min-content;"), ], }, { number: 28, name: "flex-basis", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eflex-basis\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the initial main size of a \u003ca href=\"/en-US/docs/Glossary/Flex_Item\"\u003eflex item\u003c/a\u003e. It sets the size of the content box unless otherwise set with \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/box-sizing\"\u003e\u003ccode\u003ebox-sizing\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"content\" | WidthProp", ebnf: "flex-basis =\n \"content\" | WidthProp", valueType: "length", defaultValue: "auto", related: [], provenance: "assisted", truncated: false, trueCount: 28, shown: 28, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("content", "flex-basis: content;"), v("auto", "flex-basis: auto;"), v("24px", "flex-basis: 24px;"), v("48px", "flex-basis: 48px;"), v("8px", "flex-basis: 8px;"), v("16px", "flex-basis: 16px;"), v("64px", "flex-basis: 64px;"), v("50%", "flex-basis: 50%;"), v("80%", "flex-basis: 80%;"), v("30%", "flex-basis: 30%;"), v("65%", "flex-basis: 65%;"), v("15%", "flex-basis: 15%;"), v("100%", "flex-basis: 100%;"), v("calc(24px)", "flex-basis: calc(24px);"), v("clamp(24px, 2em, 48px)", "flex-basis: clamp(24px, 2em, 48px);"), v("min(24px)", "flex-basis: min(24px);"), v("max(24px)", "flex-basis: max(24px);"), v("round(nearest, 24px, 2em)", "flex-basis: round(nearest, 24px, 2em);"), v("abs(24px)", "flex-basis: abs(24px);"), v("env(my-ident, 48px)", "flex-basis: env(my-ident, 48px);"), v("min-content", "flex-basis: min-content;"), v("max-content", "flex-basis: max-content;"), v("fit-content(24px)", "flex-basis: fit-content(24px);"), v("calc-size(auto, 2em)", "flex-basis: calc-size(auto, 2em);"), v("anchor-size(--my-var width, 48px)", "flex-basis: anchor-size(--my-var width, 48px);"), v("stretch", "flex-basis: stretch;"), v("fit-content", "flex-basis: fit-content;"), v("contain", "flex-basis: contain;"), ], }, { number: 29, name: "flex-direction", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eflex-direction\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"row\" | \"row-reverse\" | \"column\" | \"column-reverse\"", ebnf: "flex-direction =\n \"row\" | \"row-reverse\" | \"column\" | \"column-reverse\"", valueType: "keyword", defaultValue: "row-reverse", related: [], provenance: "pure", truncated: false, trueCount: 4, shown: 4, assists: [], values: [ v("row", "flex-direction: row;"), v("row-reverse", "flex-direction: row-reverse;"), v("column", "flex-direction: column;"), v("column-reverse", "flex-direction: column-reverse;"), ], }, { number: 30, name: "flex-flow", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eflex-flow\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e specifies the direction of a flex container, as well as its wrapping behavior.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "FlexDirectionProp , [ FlexWrapProp ] | FlexWrapProp , [ FlexDirectionProp ]", ebnf: "flex-flow =\n FlexDirectionProp , [ FlexWrapProp ] | FlexWrapProp , [ FlexDirectionProp ]", valueType: "keyword", defaultValue: "row wrap", related: [], provenance: "pure", truncated: false, trueCount: 31, shown: 31, assists: [], values: [ v("row nowrap", "flex-flow: row nowrap;"), v("row wrap", "flex-flow: row wrap;"), v("row wrap-reverse", "flex-flow: row wrap-reverse;"), v("row", "flex-flow: row;"), v("row-reverse nowrap", "flex-flow: row-reverse nowrap;"), v("row-reverse wrap", "flex-flow: row-reverse wrap;"), v("row-reverse wrap-reverse", "flex-flow: row-reverse wrap-reverse;"), v("row-reverse", "flex-flow: row-reverse;"), v("column nowrap", "flex-flow: column nowrap;"), v("column wrap", "flex-flow: column wrap;"), v("column wrap-reverse", "flex-flow: column wrap-reverse;"), v("column", "flex-flow: column;"), v("column-reverse nowrap", "flex-flow: column-reverse nowrap;"), v("column-reverse wrap", "flex-flow: column-reverse wrap;"), v("column-reverse wrap-reverse", "flex-flow: column-reverse wrap-reverse;"), v("column-reverse", "flex-flow: column-reverse;"), v("nowrap row", "flex-flow: nowrap row;"), v("nowrap row-reverse", "flex-flow: nowrap row-reverse;"), v("nowrap column", "flex-flow: nowrap column;"), v("nowrap column-reverse", "flex-flow: nowrap column-reverse;"), v("nowrap", "flex-flow: nowrap;"), v("wrap row", "flex-flow: wrap row;"), v("wrap row-reverse", "flex-flow: wrap row-reverse;"), v("wrap column", "flex-flow: wrap column;"), v("wrap column-reverse", "flex-flow: wrap column-reverse;"), v("wrap", "flex-flow: wrap;"), v("wrap-reverse row", "flex-flow: wrap-reverse row;"), v("wrap-reverse row-reverse", "flex-flow: wrap-reverse row-reverse;"), v("wrap-reverse column", "flex-flow: wrap-reverse column;"), v("wrap-reverse column-reverse", "flex-flow: wrap-reverse column-reverse;"), v("wrap-reverse", "flex-flow: wrap-reverse;"), ], }, { number: 31, name: "flex-grow", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eflex-grow\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the flex grow factor, which specifies how much of the flex container's \u003ca href=\"/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Controlling_flex_item_ratios\"\u003e\u003cstrong\u003epositive free space\u003c/strong\u003e\u003c/a\u003e, if any, should be assigned to the flex item's \u003ca href=\"/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox#the_flex_model\"\u003emain size\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "NonNegativeNumberType", ebnf: "flex-grow =\n NonNegativeNumberType", valueType: "number", defaultValue: "2", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "\u003cnumber [0,∞]\u003e", samples: ["1", "2", "0.5", "0.75", "0.25"] }], values: [ v("1", "flex-grow: 1;"), v("2", "flex-grow: 2;"), v("0.5", "flex-grow: 0.5;"), v("0.75", "flex-grow: 0.75;"), v("0.25", "flex-grow: 0.25;"), ], }, { number: 32, name: "flex-shrink", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eflex-shrink\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, the \u003ca href=\"/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Controlling_flex_item_ratios#the_flex-shrink_property\"\u003eflex items can shrink\u003c/a\u003e to fit according to their \u003ccode\u003eflex-shrink\u003c/code\u003e value. Each flex line's \u003ca href=\"/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Controlling_flex_item_ratios#positive_and_negative_free_space\"\u003enegative free space\u003c/a\u003e is distributed between the line's flex items that have a \u003ccode\u003eflex-shrink\u003c/code\u003e value greater than \u003ccode\u003e0\u003c/code\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "NonNegativeNumberType", ebnf: "flex-shrink =\n NonNegativeNumberType", valueType: "number", defaultValue: "2", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "\u003cnumber [0,∞]\u003e", samples: ["1", "2", "0.5", "0.75", "0.25"] }], values: [ v("1", "flex-shrink: 1;"), v("2", "flex-shrink: 2;"), v("0.5", "flex-shrink: 0.5;"), v("0.75", "flex-shrink: 0.75;"), v("0.25", "flex-shrink: 0.25;"), ], }, { number: 33, name: "flex-wrap", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eflex-wrap\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"nowrap\" | \"wrap\" | \"wrap-reverse\"", ebnf: "flex-wrap =\n \"nowrap\" | \"wrap\" | \"wrap-reverse\"", valueType: "keyword", defaultValue: "wrap", related: [], provenance: "pure", truncated: false, trueCount: 3, shown: 3, assists: [], values: [ v("nowrap", "flex-wrap: nowrap;"), v("wrap", "flex-wrap: wrap;"), v("wrap-reverse", "flex-wrap: wrap-reverse;"), ], }, { number: 34, name: "gap", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003egap\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e sets the gaps (also called \u003ca href=\"/en-US/docs/Glossary/Gutters\"\u003egutters\u003c/a\u003e) between rows and columns. This property applies to \u003ca href=\"/en-US/docs/Web/CSS/Guides/Multicol_layout\"\u003emulti-column\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Guides/Flexible_box_layout\"\u003eflex\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Guides/Grid_layout\"\u003egrid\u003c/a\u003e containers.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "RowGapProp , [ ColumnGapProp ]", ebnf: "gap =\n RowGapProp , [ ColumnGapProp ]", valueType: "length", defaultValue: "normal 24px", related: [], provenance: "assisted", truncated: true, trueCount: 134, shown: 42, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("normal normal", "gap: normal normal;"), v("normal 24px", "gap: normal 24px;"), v("normal 48px", "gap: normal 48px;"), v("normal 8px", "gap: normal 8px;"), v("normal 16px", "gap: normal 16px;"), v("normal 64px", "gap: normal 64px;"), v("normal 50%", "gap: normal 50%;"), v("normal 80%", "gap: normal 80%;"), v("normal 30%", "gap: normal 30%;"), v("normal 65%", "gap: normal 65%;"), v("normal 15%", "gap: normal 15%;"), v("normal 100%", "gap: normal 100%;"), v("normal calc(24px)", "gap: normal calc(24px);"), v("normal clamp(24px, 2em, 48px)", "gap: normal clamp(24px, 2em, 48px);"), v("normal min(24px)", "gap: normal min(24px);"), v("normal max(24px)", "gap: normal max(24px);"), v("normal round(nearest, 24px, 2em)", "gap: normal round(nearest, 24px, 2em);"), v("normal abs(24px)", "gap: normal abs(24px);"), v("normal env(my-ident, 48px)", "gap: normal env(my-ident, 48px);"), v("normal thin", "gap: normal thin;"), v("normal medium", "gap: normal medium;"), v("normal thick", "gap: normal thick;"), v("normal", "gap: normal;"), v("24px normal", "gap: 24px normal;"), v("24px 24px", "gap: 24px 24px;"), v("24px 48px", "gap: 24px 48px;"), v("24px 8px", "gap: 24px 8px;"), v("24px 16px", "gap: 24px 16px;"), v("24px 64px", "gap: 24px 64px;"), v("24px 50%", "gap: 24px 50%;"), v("24px 80%", "gap: 24px 80%;"), v("24px 30%", "gap: 24px 30%;"), v("24px 65%", "gap: 24px 65%;"), v("24px 15%", "gap: 24px 15%;"), v("24px 100%", "gap: 24px 100%;"), v("24px calc(24px)", "gap: 24px calc(24px);"), v("24px clamp(24px, 2em, 48px)", "gap: 24px clamp(24px, 2em, 48px);"), v("24px min(24px)", "gap: 24px min(24px);"), v("24px max(24px)", "gap: 24px max(24px);"), v("24px round(nearest, 24px, 2em)", "gap: 24px round(nearest, 24px, 2em);"), v("24px abs(24px)", "gap: 24px abs(24px);"), v("24px env(my-ident, 48px)", "gap: 24px env(my-ident, 48px);"), ], }, { number: 35, name: "justify-content", maturity: "modern", description: "The \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003cstrong\u003e\u003ccode\u003ejustify-content\u003c/code\u003e\u003c/strong\u003e property defines how the browser distributes space between and around content items along the \u003ca href=\"/en-US/docs/Glossary/Main_Axis\"\u003emain axis\u003c/a\u003e of a flex container and the \u003ca href=\"/en-US/docs/Glossary/Logical_properties#inline_direction\"\u003einline axis\u003c/a\u003e of grid and multicol containers.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | ContentDistributionType | [ OverflowPositionType ] , ( ContentPositionType | \"left\" | \"right\" )", ebnf: "justify-content =\n \"normal\" | ContentDistributionType | [ OverflowPositionType ] , ( ContentPositionType | \"left\" | \"right\" )", valueType: "keyword", defaultValue: "space-between", related: [], provenance: "pure", truncated: false, trueCount: 26, shown: 26, assists: [], values: [ v("normal", "justify-content: normal;"), v("space-between", "justify-content: space-between;"), v("space-around", "justify-content: space-around;"), v("space-evenly", "justify-content: space-evenly;"), v("stretch", "justify-content: stretch;"), v("unsafe center", "justify-content: unsafe center;"), v("unsafe start", "justify-content: unsafe start;"), v("unsafe end", "justify-content: unsafe end;"), v("unsafe flex-start", "justify-content: unsafe flex-start;"), v("unsafe flex-end", "justify-content: unsafe flex-end;"), v("unsafe left", "justify-content: unsafe left;"), v("unsafe right", "justify-content: unsafe right;"), v("safe center", "justify-content: safe center;"), v("safe start", "justify-content: safe start;"), v("safe end", "justify-content: safe end;"), v("safe flex-start", "justify-content: safe flex-start;"), v("safe flex-end", "justify-content: safe flex-end;"), v("safe left", "justify-content: safe left;"), v("safe right", "justify-content: safe right;"), v("center", "justify-content: center;"), v("start", "justify-content: start;"), v("end", "justify-content: end;"), v("flex-start", "justify-content: flex-start;"), v("flex-end", "justify-content: flex-end;"), v("left", "justify-content: left;"), v("right", "justify-content: right;"), ], }, { number: 36, name: "justify-items", maturity: "modern", description: "The \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003cstrong\u003e\u003ccode\u003ejustify-items\u003c/code\u003e\u003c/strong\u003e property defines the default \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/justify-self\"\u003e\u003ccode\u003ejustify-self\u003c/code\u003e\u003c/a\u003e for all items of the box, giving them all a default way of justifying each box along the appropriate axis.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | \"stretch\" | BaselinePositionType | [ OverflowPositionType ] , ( SelfPositionType | \"left\" | \"right\" ) | \"legacy\" | \"legacy\" , ( \"left\" | \"right\" | \"center\" ) | \"anchor-center\"", ebnf: "justify-items =\n \"normal\" | \"stretch\" | BaselinePositionType | [ OverflowPositionType ] , ( SelfPositionType | \"left\" | \"right\" ) | \"legacy\" | \"legacy\" , ( \"left\" | \"right\" | \"center\" ) | \"anchor-center\"", valueType: "keyword", defaultValue: "stretch", related: [], provenance: "pure", truncated: false, trueCount: 37, shown: 37, assists: [], values: [ v("normal", "justify-items: normal;"), v("stretch", "justify-items: stretch;"), v("first baseline", "justify-items: first baseline;"), v("last baseline", "justify-items: last baseline;"), v("baseline", "justify-items: baseline;"), v("unsafe center", "justify-items: unsafe center;"), v("unsafe start", "justify-items: unsafe start;"), v("unsafe end", "justify-items: unsafe end;"), v("unsafe self-start", "justify-items: unsafe self-start;"), v("unsafe self-end", "justify-items: unsafe self-end;"), v("unsafe flex-start", "justify-items: unsafe flex-start;"), v("unsafe flex-end", "justify-items: unsafe flex-end;"), v("unsafe left", "justify-items: unsafe left;"), v("unsafe right", "justify-items: unsafe right;"), v("safe center", "justify-items: safe center;"), v("safe start", "justify-items: safe start;"), v("safe end", "justify-items: safe end;"), v("safe self-start", "justify-items: safe self-start;"), v("safe self-end", "justify-items: safe self-end;"), v("safe flex-start", "justify-items: safe flex-start;"), v("safe flex-end", "justify-items: safe flex-end;"), v("safe left", "justify-items: safe left;"), v("safe right", "justify-items: safe right;"), v("center", "justify-items: center;"), v("start", "justify-items: start;"), v("end", "justify-items: end;"), v("self-start", "justify-items: self-start;"), v("self-end", "justify-items: self-end;"), v("flex-start", "justify-items: flex-start;"), v("flex-end", "justify-items: flex-end;"), v("left", "justify-items: left;"), v("right", "justify-items: right;"), v("legacy", "justify-items: legacy;"), v("legacy left", "justify-items: legacy left;"), v("legacy right", "justify-items: legacy right;"), v("legacy center", "justify-items: legacy center;"), v("anchor-center", "justify-items: anchor-center;"), ], }, { number: 37, name: "justify-self", maturity: "modern", description: "The \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003cstrong\u003e\u003ccode\u003ejustify-self\u003c/code\u003e\u003c/strong\u003e property sets the way a box is justified inside its alignment container along the appropriate axis.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | [ OverflowPositionType ] , ( \"normal\" | SelfPositionType | \"left\" | \"right\" ) | \"stretch\" | BaselinePositionType | \"anchor-center\"", ebnf: "justify-self =\n \"auto\" | [ OverflowPositionType ] , ( \"normal\" | SelfPositionType | \"left\" | \"right\" ) | \"stretch\" | BaselinePositionType | \"anchor-center\"", valueType: "keyword", defaultValue: "unsafe normal", related: [], provenance: "pure", truncated: false, trueCount: 36, shown: 36, assists: [], values: [ v("auto", "justify-self: auto;"), v("unsafe normal", "justify-self: unsafe normal;"), v("unsafe center", "justify-self: unsafe center;"), v("unsafe start", "justify-self: unsafe start;"), v("unsafe end", "justify-self: unsafe end;"), v("unsafe self-start", "justify-self: unsafe self-start;"), v("unsafe self-end", "justify-self: unsafe self-end;"), v("unsafe flex-start", "justify-self: unsafe flex-start;"), v("unsafe flex-end", "justify-self: unsafe flex-end;"), v("unsafe left", "justify-self: unsafe left;"), v("unsafe right", "justify-self: unsafe right;"), v("safe normal", "justify-self: safe normal;"), v("safe center", "justify-self: safe center;"), v("safe start", "justify-self: safe start;"), v("safe end", "justify-self: safe end;"), v("safe self-start", "justify-self: safe self-start;"), v("safe self-end", "justify-self: safe self-end;"), v("safe flex-start", "justify-self: safe flex-start;"), v("safe flex-end", "justify-self: safe flex-end;"), v("safe left", "justify-self: safe left;"), v("safe right", "justify-self: safe right;"), v("normal", "justify-self: normal;"), v("center", "justify-self: center;"), v("start", "justify-self: start;"), v("end", "justify-self: end;"), v("self-start", "justify-self: self-start;"), v("self-end", "justify-self: self-end;"), v("flex-start", "justify-self: flex-start;"), v("flex-end", "justify-self: flex-end;"), v("left", "justify-self: left;"), v("right", "justify-self: right;"), v("stretch", "justify-self: stretch;"), v("first baseline", "justify-self: first baseline;"), v("last baseline", "justify-self: last baseline;"), v("baseline", "justify-self: baseline;"), v("anchor-center", "justify-self: anchor-center;"), ], }, { number: 38, name: "order", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eorder\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending \u003ccode\u003eorder\u003c/code\u003e value and then by their source code order. Items not given an explicit \u003ccode\u003eorder\u003c/code\u003e value are assigned the default value of \u003ccode\u003e0\u003c/code\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "IntegerType", ebnf: "order =\n IntegerType", valueType: "number", defaultValue: "1", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "\u003cinteger\u003e", samples: ["2", "1", "3", "5", "4"] }], values: [ v("2", "order: 2;"), v("1", "order: 1;"), v("3", "order: 3;"), v("5", "order: 5;"), v("4", "order: 4;"), ], }, { number: 39, name: "place-content", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eplace-content\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e allows you to align content along both the block and inline directions at once (i.e., the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/align-content\"\u003e\u003ccode\u003ealign-content\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/justify-content\"\u003e\u003ccode\u003ejustify-content\u003c/code\u003e\u003c/a\u003e properties) in a relevant layout system such as \u003ca href=\"/en-US/docs/Web/CSS/Guides/Grid_layout\"\u003eGrid\u003c/a\u003e or \u003ca href=\"/en-US/docs/Web/CSS/Guides/Flexible_box_layout\"\u003eFlexbox\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "AlignContentProp , [ JustifyContentProp ]", ebnf: "place-content =\n AlignContentProp , [ JustifyContentProp ]", valueType: "keyword", defaultValue: "normal space-between", related: [], provenance: "pure", truncated: true, trueCount: 160, shown: 50, assists: [], values: [ v("normal normal", "place-content: normal normal;"), v("normal space-between", "place-content: normal space-between;"), v("normal space-around", "place-content: normal space-around;"), v("normal space-evenly", "place-content: normal space-evenly;"), v("normal stretch", "place-content: normal stretch;"), v("normal unsafe center", "place-content: normal unsafe center;"), v("normal unsafe start", "place-content: normal unsafe start;"), v("normal unsafe end", "place-content: normal unsafe end;"), v("normal unsafe flex-start", "place-content: normal unsafe flex-start;"), v("normal unsafe flex-end", "place-content: normal unsafe flex-end;"), v("normal unsafe left", "place-content: normal unsafe left;"), v("normal unsafe right", "place-content: normal unsafe right;"), v("normal safe center", "place-content: normal safe center;"), v("normal safe start", "place-content: normal safe start;"), v("normal safe end", "place-content: normal safe end;"), v("normal safe flex-start", "place-content: normal safe flex-start;"), v("normal safe flex-end", "place-content: normal safe flex-end;"), v("normal safe left", "place-content: normal safe left;"), v("normal safe right", "place-content: normal safe right;"), v("normal center", "place-content: normal center;"), v("normal start", "place-content: normal start;"), v("normal end", "place-content: normal end;"), v("normal flex-start", "place-content: normal flex-start;"), v("normal flex-end", "place-content: normal flex-end;"), v("normal left", "place-content: normal left;"), v("normal right", "place-content: normal right;"), v("normal", "place-content: normal;"), v("first baseline normal", "place-content: first baseline normal;"), v("first baseline space-between", "place-content: first baseline space-between;"), v("first baseline space-around", "place-content: first baseline space-around;"), v("first baseline space-evenly", "place-content: first baseline space-evenly;"), v("first baseline stretch", "place-content: first baseline stretch;"), v("first baseline unsafe center", "place-content: first baseline unsafe center;"), v("first baseline unsafe start", "place-content: first baseline unsafe start;"), v("first baseline unsafe end", "place-content: first baseline unsafe end;"), v("first baseline unsafe flex-start", "place-content: first baseline unsafe flex-start;"), v("first baseline unsafe flex-end", "place-content: first baseline unsafe flex-end;"), v("first baseline unsafe left", "place-content: first baseline unsafe left;"), v("first baseline unsafe right", "place-content: first baseline unsafe right;"), v("first baseline safe center", "place-content: first baseline safe center;"), v("first baseline safe start", "place-content: first baseline safe start;"), v("first baseline safe end", "place-content: first baseline safe end;"), v("first baseline safe flex-start", "place-content: first baseline safe flex-start;"), v("first baseline safe flex-end", "place-content: first baseline safe flex-end;"), v("first baseline safe left", "place-content: first baseline safe left;"), v("first baseline safe right", "place-content: first baseline safe right;"), v("first baseline center", "place-content: first baseline center;"), v("first baseline start", "place-content: first baseline start;"), v("first baseline end", "place-content: first baseline end;"), v("first baseline flex-start", "place-content: first baseline flex-start;"), ], }, { number: 40, name: "place-items", maturity: "modern", description: "The \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003cstrong\u003e\u003ccode\u003eplace-items\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e aligns items along both the block and inline directions at once. It sets the values of the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/align-items\"\u003e\u003ccode\u003ealign-items\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/justify-items\"\u003e\u003ccode\u003ejustify-items\u003c/code\u003e\u003c/a\u003e properties. If the second value is not set, the first value is also used for it.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "AlignItemsProp , [ JustifyItemsProp ]", ebnf: "place-items =\n AlignItemsProp , [ JustifyItemsProp ]", valueType: "keyword", defaultValue: "normal stretch", related: [], provenance: "pure", truncated: true, trueCount: 160, shown: 50, assists: [], values: [ v("normal normal", "place-items: normal normal;"), v("normal stretch", "place-items: normal stretch;"), v("normal first baseline", "place-items: normal first baseline;"), v("normal last baseline", "place-items: normal last baseline;"), v("normal baseline", "place-items: normal baseline;"), v("normal unsafe center", "place-items: normal unsafe center;"), v("normal unsafe start", "place-items: normal unsafe start;"), v("normal unsafe end", "place-items: normal unsafe end;"), v("normal unsafe self-start", "place-items: normal unsafe self-start;"), v("normal unsafe self-end", "place-items: normal unsafe self-end;"), v("normal unsafe flex-start", "place-items: normal unsafe flex-start;"), v("normal unsafe flex-end", "place-items: normal unsafe flex-end;"), v("normal unsafe left", "place-items: normal unsafe left;"), v("normal unsafe right", "place-items: normal unsafe right;"), v("normal safe center", "place-items: normal safe center;"), v("normal safe start", "place-items: normal safe start;"), v("normal safe end", "place-items: normal safe end;"), v("normal safe self-start", "place-items: normal safe self-start;"), v("normal safe self-end", "place-items: normal safe self-end;"), v("normal safe flex-start", "place-items: normal safe flex-start;"), v("normal safe flex-end", "place-items: normal safe flex-end;"), v("normal safe left", "place-items: normal safe left;"), v("normal safe right", "place-items: normal safe right;"), v("normal center", "place-items: normal center;"), v("normal start", "place-items: normal start;"), v("normal end", "place-items: normal end;"), v("normal self-start", "place-items: normal self-start;"), v("normal self-end", "place-items: normal self-end;"), v("normal flex-start", "place-items: normal flex-start;"), v("normal flex-end", "place-items: normal flex-end;"), v("normal left", "place-items: normal left;"), v("normal right", "place-items: normal right;"), v("normal legacy", "place-items: normal legacy;"), v("normal legacy left", "place-items: normal legacy left;"), v("normal legacy right", "place-items: normal legacy right;"), v("normal legacy center", "place-items: normal legacy center;"), v("normal anchor-center", "place-items: normal anchor-center;"), v("normal", "place-items: normal;"), v("stretch normal", "place-items: stretch normal;"), v("stretch stretch", "place-items: stretch stretch;"), v("stretch first baseline", "place-items: stretch first baseline;"), v("stretch last baseline", "place-items: stretch last baseline;"), v("stretch baseline", "place-items: stretch baseline;"), v("stretch unsafe center", "place-items: stretch unsafe center;"), v("stretch unsafe start", "place-items: stretch unsafe start;"), v("stretch unsafe end", "place-items: stretch unsafe end;"), v("stretch unsafe self-start", "place-items: stretch unsafe self-start;"), v("stretch unsafe self-end", "place-items: stretch unsafe self-end;"), v("stretch unsafe flex-start", "place-items: stretch unsafe flex-start;"), v("stretch unsafe flex-end", "place-items: stretch unsafe flex-end;"), ], }, { number: 41, name: "place-self", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eplace-self\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e allows you to align an individual item in both the block and inline directions at once (i.e., the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/align-self\"\u003e\u003ccode\u003ealign-self\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/justify-self\"\u003e\u003ccode\u003ejustify-self\u003c/code\u003e\u003c/a\u003e properties). This property applies to block-level boxes, absolutely-positioned boxes, and grid items. If the second value is not present, the first value is also used for it.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "AlignSelfProp , [ JustifySelfProp ]", ebnf: "place-self =\n AlignSelfProp , [ JustifySelfProp ]", valueType: "keyword", defaultValue: "auto unsafe normal", related: [], provenance: "pure", truncated: true, trueCount: 160, shown: 50, assists: [], values: [ v("auto auto", "place-self: auto auto;"), v("auto unsafe normal", "place-self: auto unsafe normal;"), v("auto unsafe center", "place-self: auto unsafe center;"), v("auto unsafe start", "place-self: auto unsafe start;"), v("auto unsafe end", "place-self: auto unsafe end;"), v("auto unsafe self-start", "place-self: auto unsafe self-start;"), v("auto unsafe self-end", "place-self: auto unsafe self-end;"), v("auto unsafe flex-start", "place-self: auto unsafe flex-start;"), v("auto unsafe flex-end", "place-self: auto unsafe flex-end;"), v("auto unsafe left", "place-self: auto unsafe left;"), v("auto unsafe right", "place-self: auto unsafe right;"), v("auto safe normal", "place-self: auto safe normal;"), v("auto safe center", "place-self: auto safe center;"), v("auto safe start", "place-self: auto safe start;"), v("auto safe end", "place-self: auto safe end;"), v("auto safe self-start", "place-self: auto safe self-start;"), v("auto safe self-end", "place-self: auto safe self-end;"), v("auto safe flex-start", "place-self: auto safe flex-start;"), v("auto safe flex-end", "place-self: auto safe flex-end;"), v("auto safe left", "place-self: auto safe left;"), v("auto safe right", "place-self: auto safe right;"), v("auto normal", "place-self: auto normal;"), v("auto center", "place-self: auto center;"), v("auto start", "place-self: auto start;"), v("auto end", "place-self: auto end;"), v("auto self-start", "place-self: auto self-start;"), v("auto self-end", "place-self: auto self-end;"), v("auto flex-start", "place-self: auto flex-start;"), v("auto flex-end", "place-self: auto flex-end;"), v("auto left", "place-self: auto left;"), v("auto right", "place-self: auto right;"), v("auto stretch", "place-self: auto stretch;"), v("auto first baseline", "place-self: auto first baseline;"), v("auto last baseline", "place-self: auto last baseline;"), v("auto baseline", "place-self: auto baseline;"), v("auto anchor-center", "place-self: auto anchor-center;"), v("auto", "place-self: auto;"), v("unsafe normal auto", "place-self: unsafe normal auto;"), v("unsafe normal unsafe normal", "place-self: unsafe normal unsafe normal;"), v("unsafe normal unsafe center", "place-self: unsafe normal unsafe center;"), v("unsafe normal unsafe start", "place-self: unsafe normal unsafe start;"), v("unsafe normal unsafe end", "place-self: unsafe normal unsafe end;"), v("unsafe normal unsafe self-start", "place-self: unsafe normal unsafe self-start;"), v("unsafe normal unsafe self-end", "place-self: unsafe normal unsafe self-end;"), v("unsafe normal unsafe flex-start", "place-self: unsafe normal unsafe flex-start;"), v("unsafe normal unsafe flex-end", "place-self: unsafe normal unsafe flex-end;"), v("unsafe normal unsafe left", "place-self: unsafe normal unsafe left;"), v("unsafe normal unsafe right", "place-self: unsafe normal unsafe right;"), v("unsafe normal safe normal", "place-self: unsafe normal safe normal;"), v("unsafe normal safe center", "place-self: unsafe normal safe center;"), ], }, { number: 42, name: "row-gap", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003erow-gap\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the size of the gap (\u003ca href=\"/en-US/docs/Glossary/Gutters\"\u003egutter\u003c/a\u003e) between an element's rows.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | NonNegativeLengthPercentageType | LineWidthType", ebnf: "row-gap =\n \"normal\" | NonNegativeLengthPercentageType | LineWidthType", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 22, shown: 22, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("normal", "row-gap: normal;"), v("24px", "row-gap: 24px;"), v("48px", "row-gap: 48px;"), v("8px", "row-gap: 8px;"), v("16px", "row-gap: 16px;"), v("64px", "row-gap: 64px;"), v("50%", "row-gap: 50%;"), v("80%", "row-gap: 80%;"), v("30%", "row-gap: 30%;"), v("65%", "row-gap: 65%;"), v("15%", "row-gap: 15%;"), v("100%", "row-gap: 100%;"), v("calc(24px)", "row-gap: calc(24px);"), v("clamp(24px, 2em, 48px)", "row-gap: clamp(24px, 2em, 48px);"), v("min(24px)", "row-gap: min(24px);"), v("max(24px)", "row-gap: max(24px);"), v("round(nearest, 24px, 2em)", "row-gap: round(nearest, 24px, 2em);"), v("abs(24px)", "row-gap: abs(24px);"), v("env(my-ident, 48px)", "row-gap: env(my-ident, 48px);"), v("thin", "row-gap: thin;"), v("medium", "row-gap: medium;"), v("thick", "row-gap: thick;"), ], }, ], }, { id: "grid", sigil: "04", title: "Grid", blurb: "Two-dimensional layout: tracks, areas and line-based placement.", demo: "generic", sampleKind: "box", group: "families", focus: false, gallery: false, count: 18, properties: [ { number: 43, name: "grid", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003egrid\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property is a \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e that sets all of the explicit and implicit grid properties in a single declaration.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "GridTemplateProp | GridTemplateRowsProp , \"/\" , ( \"auto-flow\" , [ \"dense\" ] ) , [ GridAutoColumnsProp ] | ( \"auto-flow\" , [ \"dense\" ] ) , [ GridAutoRowsProp ] , \"/\" , GridTemplateColumnsProp", ebnf: "grid =\n GridTemplateProp | GridTemplateRowsProp , \"/\" , ( \"auto-flow\" , [ \"dense\" ] ) , [ GridAutoColumnsProp ] | ( \"auto-flow\" , [ \"dense\" ] ) , [ GridAutoRowsProp ] , \"/\" , GridTemplateColumnsProp", valueType: "length", defaultValue: "none/ none", related: [], provenance: "assisted", truncated: true, trueCount: 320, shown: 50, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003cflex [0,∞]\u003e", samples: ["1fr", "2fr"] }, { type: "\u003cinteger\u003e", samples: ["2", "1", "3", "5", "4"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cstring\u003e", samples: ["\"Specimen\"", "\"Aa\""] }], values: [ v("none", "grid: none;"), v("none/ none", "grid: none/ none;"), v("none/ [ my-ident ] 24px [ my-ident ]", "grid: none/ [ my-ident ] 24px [ my-ident ];"), v("none/ [ my-ident ] 24px [ tag-a ]", "grid: none/ [ my-ident ] 24px [ tag-a ];"), v("none/ [ my-ident ] 24px", "grid: none/ [ my-ident ] 24px;"), v("none/ [ my-ident ] 48px [ my-ident ]", "grid: none/ [ my-ident ] 48px [ my-ident ];"), v("none/ [ my-ident ] 48px [ tag-a ]", "grid: none/ [ my-ident ] 48px [ tag-a ];"), v("none/ [ my-ident ] 48px", "grid: none/ [ my-ident ] 48px;"), v("none/ [ my-ident ] 8px [ my-ident ]", "grid: none/ [ my-ident ] 8px [ my-ident ];"), v("none/ [ my-ident ] 8px [ tag-a ]", "grid: none/ [ my-ident ] 8px [ tag-a ];"), v("none/ [ my-ident ] 8px", "grid: none/ [ my-ident ] 8px;"), v("none/ [ my-ident ] 16px [ my-ident ]", "grid: none/ [ my-ident ] 16px [ my-ident ];"), v("none/ [ my-ident ] 16px [ tag-a ]", "grid: none/ [ my-ident ] 16px [ tag-a ];"), v("none/ [ my-ident ] 16px", "grid: none/ [ my-ident ] 16px;"), v("none/ [ my-ident ] 64px [ my-ident ]", "grid: none/ [ my-ident ] 64px [ my-ident ];"), v("none/ [ my-ident ] 64px [ tag-a ]", "grid: none/ [ my-ident ] 64px [ tag-a ];"), v("none/ [ my-ident ] 64px", "grid: none/ [ my-ident ] 64px;"), v("none/ [ my-ident ] 50% [ my-ident ]", "grid: none/ [ my-ident ] 50% [ my-ident ];"), v("none/ [ my-ident ] 50% [ tag-a ]", "grid: none/ [ my-ident ] 50% [ tag-a ];"), v("none/ [ my-ident ] 50%", "grid: none/ [ my-ident ] 50%;"), v("none/ [ my-ident ] 80% [ my-ident ]", "grid: none/ [ my-ident ] 80% [ my-ident ];"), v("none/ [ my-ident ] 80% [ tag-a ]", "grid: none/ [ my-ident ] 80% [ tag-a ];"), v("none/ [ my-ident ] 80%", "grid: none/ [ my-ident ] 80%;"), v("none/ [ my-ident ] 30% [ my-ident ]", "grid: none/ [ my-ident ] 30% [ my-ident ];"), v("none/ [ my-ident ] 30% [ tag-a ]", "grid: none/ [ my-ident ] 30% [ tag-a ];"), v("none/ [ my-ident ] 30%", "grid: none/ [ my-ident ] 30%;"), v("none/ [ my-ident ] 65% [ my-ident ]", "grid: none/ [ my-ident ] 65% [ my-ident ];"), v("none/ [ my-ident ] 65% [ tag-a ]", "grid: none/ [ my-ident ] 65% [ tag-a ];"), v("none/ [ my-ident ] 65%", "grid: none/ [ my-ident ] 65%;"), v("none/ [ my-ident ] 15% [ my-ident ]", "grid: none/ [ my-ident ] 15% [ my-ident ];"), v("none/ [ my-ident ] 15% [ tag-a ]", "grid: none/ [ my-ident ] 15% [ tag-a ];"), v("none/ [ my-ident ] 15%", "grid: none/ [ my-ident ] 15%;"), v("none/ [ my-ident ] 100% [ my-ident ]", "grid: none/ [ my-ident ] 100% [ my-ident ];"), v("none/ [ my-ident ] 100% [ tag-a ]", "grid: none/ [ my-ident ] 100% [ tag-a ];"), v("none/ [ my-ident ] 100%", "grid: none/ [ my-ident ] 100%;"), v("none/ [ my-ident ] calc(24px) [ my-ident ]", "grid: none/ [ my-ident ] calc(24px) [ my-ident ];"), v("none/ [ my-ident ] calc(24px) [ tag-a ]", "grid: none/ [ my-ident ] calc(24px) [ tag-a ];"), v("none/ [ my-ident ] calc(24px)", "grid: none/ [ my-ident ] calc(24px);"), v("none/ [ my-ident ] clamp(24px, 2em, 48px) [ my-ident ]", "grid: none/ [ my-ident ] clamp(24px, 2em, 48px) [ my-ident ];"), v("none/ [ my-ident ] clamp(24px, 2em, 48px) [ tag-a ]", "grid: none/ [ my-ident ] clamp(24px, 2em, 48px) [ tag-a ];"), v("none/ [ my-ident ] clamp(24px, 2em, 48px)", "grid: none/ [ my-ident ] clamp(24px, 2em, 48px);"), v("none/ [ my-ident ] min(24px) [ my-ident ]", "grid: none/ [ my-ident ] min(24px) [ my-ident ];"), v("none/ [ my-ident ] min(24px) [ tag-a ]", "grid: none/ [ my-ident ] min(24px) [ tag-a ];"), v("none/ [ my-ident ] min(24px)", "grid: none/ [ my-ident ] min(24px);"), v("none/ [ my-ident ] max(24px) [ my-ident ]", "grid: none/ [ my-ident ] max(24px) [ my-ident ];"), v("none/ [ my-ident ] max(24px) [ tag-a ]", "grid: none/ [ my-ident ] max(24px) [ tag-a ];"), v("none/ [ my-ident ] max(24px)", "grid: none/ [ my-ident ] max(24px);"), v("none/ [ my-ident ] round(nearest, 24px, 2em) [ my-ident ]", "grid: none/ [ my-ident ] round(nearest, 24px, 2em) [ my-ident ];"), v("none/ [ my-ident ] round(nearest, 24px, 2em) [ tag-a ]", "grid: none/ [ my-ident ] round(nearest, 24px, 2em) [ tag-a ];"), v("none/ [ my-ident ] round(nearest, 24px, 2em)", "grid: none/ [ my-ident ] round(nearest, 24px, 2em);"), ], }, { number: 44, name: "grid-area", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003egrid-area\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e specifies a grid item's size and location within a \u003ca href=\"/en-US/docs/Glossary/Grid\"\u003egrid\u003c/a\u003e by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its \u003ca href=\"/en-US/docs/Glossary/Grid_Areas\"\u003egrid area\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "GridLineType , [ GridAreaPropItem ] , [ GridAreaPropItem ] , [ GridAreaPropItem ]", ebnf: "grid-area =\n GridLineType , [ GridAreaPropItem ] , [ GridAreaPropItem ] , [ GridAreaPropItem ]", valueType: "keyword", defaultValue: "auto/ auto/ auto/ my-ident", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cinteger [-∞,-1]\u003e", samples: ["-1", "-2", "-3"] }, { type: "\u003cinteger [1,∞]\u003e", samples: ["2", "3", "1", "5", "4"] }], values: [ v("auto/ auto/ auto/ auto", "grid-area: auto/ auto/ auto/ auto;"), v("auto/ auto/ auto/ my-ident", "grid-area: auto/ auto/ auto/ my-ident;"), v("auto/ auto/ auto/ tag-a", "grid-area: auto/ auto/ auto/ tag-a;"), v("auto/ auto/ auto/ 2 my-ident", "grid-area: auto/ auto/ auto/ 2 my-ident;"), v("auto/ auto/ auto/ 2 tag-a", "grid-area: auto/ auto/ auto/ 2 tag-a;"), v("auto/ auto/ auto/ 2", "grid-area: auto/ auto/ auto/ 2;"), v("auto/ auto/ auto/ 3 my-ident", "grid-area: auto/ auto/ auto/ 3 my-ident;"), v("auto/ auto/ auto/ 3 tag-a", "grid-area: auto/ auto/ auto/ 3 tag-a;"), v("auto/ auto/ auto/ 3", "grid-area: auto/ auto/ auto/ 3;"), v("auto/ auto/ auto/ 1 my-ident", "grid-area: auto/ auto/ auto/ 1 my-ident;"), v("auto/ auto/ auto/ 1 tag-a", "grid-area: auto/ auto/ auto/ 1 tag-a;"), v("auto/ auto/ auto/ 1", "grid-area: auto/ auto/ auto/ 1;"), v("auto/ auto/ auto/ 5 my-ident", "grid-area: auto/ auto/ auto/ 5 my-ident;"), v("auto/ auto/ auto/ 5 tag-a", "grid-area: auto/ auto/ auto/ 5 tag-a;"), v("auto/ auto/ auto/ 5", "grid-area: auto/ auto/ auto/ 5;"), v("auto/ auto/ auto/ 4 my-ident", "grid-area: auto/ auto/ auto/ 4 my-ident;"), v("auto/ auto/ auto/ 4 tag-a", "grid-area: auto/ auto/ auto/ 4 tag-a;"), v("auto/ auto/ auto/ 4", "grid-area: auto/ auto/ auto/ 4;"), v("auto/ auto/ auto/ -1 my-ident", "grid-area: auto/ auto/ auto/ -1 my-ident;"), v("auto/ auto/ auto/ -1 tag-a", "grid-area: auto/ auto/ auto/ -1 tag-a;"), v("auto/ auto/ auto/ -1", "grid-area: auto/ auto/ auto/ -1;"), v("auto/ auto/ auto/ -2 my-ident", "grid-area: auto/ auto/ auto/ -2 my-ident;"), v("auto/ auto/ auto/ -2 tag-a", "grid-area: auto/ auto/ auto/ -2 tag-a;"), v("auto/ auto/ auto/ -2", "grid-area: auto/ auto/ auto/ -2;"), v("auto/ auto/ auto/ -3 my-ident", "grid-area: auto/ auto/ auto/ -3 my-ident;"), v("auto/ auto/ auto/ -3 tag-a", "grid-area: auto/ auto/ auto/ -3 tag-a;"), v("auto/ auto/ auto/ -3", "grid-area: auto/ auto/ auto/ -3;"), v("auto/ auto/ auto/ span 2 my-ident", "grid-area: auto/ auto/ auto/ span 2 my-ident;"), v("auto/ auto/ auto/ span 2 tag-a", "grid-area: auto/ auto/ auto/ span 2 tag-a;"), v("auto/ auto/ auto/ span 2", "grid-area: auto/ auto/ auto/ span 2;"), v("auto/ auto/ auto/ span 3 my-ident", "grid-area: auto/ auto/ auto/ span 3 my-ident;"), v("auto/ auto/ auto/ span 3 tag-a", "grid-area: auto/ auto/ auto/ span 3 tag-a;"), v("auto/ auto/ auto/ span 3", "grid-area: auto/ auto/ auto/ span 3;"), v("auto/ auto/ auto/ span 1 my-ident", "grid-area: auto/ auto/ auto/ span 1 my-ident;"), v("auto/ auto/ auto/ span 1 tag-a", "grid-area: auto/ auto/ auto/ span 1 tag-a;"), v("auto/ auto/ auto/ span 1", "grid-area: auto/ auto/ auto/ span 1;"), v("auto/ auto/ auto/ span 5 my-ident", "grid-area: auto/ auto/ auto/ span 5 my-ident;"), v("auto/ auto/ auto/ span 5 tag-a", "grid-area: auto/ auto/ auto/ span 5 tag-a;"), v("auto/ auto/ auto/ span 5", "grid-area: auto/ auto/ auto/ span 5;"), v("auto/ auto/ auto/ span 4 my-ident", "grid-area: auto/ auto/ auto/ span 4 my-ident;"), v("auto/ auto/ auto/ span 4 tag-a", "grid-area: auto/ auto/ auto/ span 4 tag-a;"), v("auto/ auto/ auto/ span 4", "grid-area: auto/ auto/ auto/ span 4;"), v("auto/ auto/ auto/ span my-ident", "grid-area: auto/ auto/ auto/ span my-ident;"), v("auto/ auto/ auto/ span tag-a", "grid-area: auto/ auto/ auto/ span tag-a;"), v("auto/ auto/ auto/ span", "grid-area: auto/ auto/ auto/ span;"), v("auto/ auto/ auto", "grid-area: auto/ auto/ auto;"), v("auto/ auto/ my-ident/ auto", "grid-area: auto/ auto/ my-ident/ auto;"), v("auto/ auto/ my-ident/ my-ident", "grid-area: auto/ auto/ my-ident/ my-ident;"), v("auto/ auto/ my-ident/ tag-a", "grid-area: auto/ auto/ my-ident/ tag-a;"), v("auto/ auto/ my-ident/ 2 my-ident", "grid-area: auto/ auto/ my-ident/ 2 my-ident;"), ], }, { number: 45, name: "grid-auto-columns", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003egrid-auto-columns\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the size of an implicitly-created grid column \u003ca href=\"/en-US/docs/Glossary/Grid_Tracks\"\u003etrack\u003c/a\u003e or pattern of tracks.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "TrackSizeType , { TrackSizeType }", ebnf: "grid-auto-columns =\n TrackSizeType , { TrackSizeType }", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 26, shown: 26, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003cflex [0,∞]\u003e", samples: ["1fr", "2fr"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "grid-auto-columns: 24px;"), v("48px", "grid-auto-columns: 48px;"), v("8px", "grid-auto-columns: 8px;"), v("16px", "grid-auto-columns: 16px;"), v("64px", "grid-auto-columns: 64px;"), v("50%", "grid-auto-columns: 50%;"), v("80%", "grid-auto-columns: 80%;"), v("30%", "grid-auto-columns: 30%;"), v("65%", "grid-auto-columns: 65%;"), v("15%", "grid-auto-columns: 15%;"), v("100%", "grid-auto-columns: 100%;"), v("calc(24px)", "grid-auto-columns: calc(24px);"), v("clamp(24px, 2em, 48px)", "grid-auto-columns: clamp(24px, 2em, 48px);"), v("min(24px)", "grid-auto-columns: min(24px);"), v("max(24px)", "grid-auto-columns: max(24px);"), v("round(nearest, 24px, 2em)", "grid-auto-columns: round(nearest, 24px, 2em);"), v("abs(24px)", "grid-auto-columns: abs(24px);"), v("var(--my-var, 48px)", "grid-auto-columns: var(--my-var, 48px);"), v("env(my-ident, 48px)", "grid-auto-columns: env(my-ident, 48px);"), v("1fr", "grid-auto-columns: 1fr;"), v("2fr", "grid-auto-columns: 2fr;"), v("min-content", "grid-auto-columns: min-content;"), v("max-content", "grid-auto-columns: max-content;"), v("auto", "grid-auto-columns: auto;"), v("minmax(24px, 64px)", "grid-auto-columns: minmax(24px, 64px);"), v("fit-content(24px)", "grid-auto-columns: fit-content(24px);"), ], }, { number: 46, name: "grid-auto-flow", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003egrid-auto-flow\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "( \"row\" | \"column\" ) , [ \"dense\" ] | \"dense\" , [ ( \"row\" | \"column\" ) ]", ebnf: "grid-auto-flow =\n ( \"row\" | \"column\" ) , [ \"dense\" ] | \"dense\" , [ ( \"row\" | \"column\" ) ]", valueType: "keyword", defaultValue: "row", related: [], provenance: "pure", truncated: false, trueCount: 7, shown: 7, assists: [], values: [ v("row dense", "grid-auto-flow: row dense;"), v("row", "grid-auto-flow: row;"), v("column dense", "grid-auto-flow: column dense;"), v("column", "grid-auto-flow: column;"), v("dense row", "grid-auto-flow: dense row;"), v("dense column", "grid-auto-flow: dense column;"), v("dense", "grid-auto-flow: dense;"), ], }, { number: 47, name: "grid-auto-rows", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003egrid-auto-rows\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the size of an implicitly-created grid row \u003ca href=\"/en-US/docs/Glossary/Grid_Tracks\"\u003etrack\u003c/a\u003e or pattern of tracks.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "TrackSizeType , { TrackSizeType }", ebnf: "grid-auto-rows =\n TrackSizeType , { TrackSizeType }", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 26, shown: 26, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003cflex [0,∞]\u003e", samples: ["1fr", "2fr"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "grid-auto-rows: 24px;"), v("48px", "grid-auto-rows: 48px;"), v("8px", "grid-auto-rows: 8px;"), v("16px", "grid-auto-rows: 16px;"), v("64px", "grid-auto-rows: 64px;"), v("50%", "grid-auto-rows: 50%;"), v("80%", "grid-auto-rows: 80%;"), v("30%", "grid-auto-rows: 30%;"), v("65%", "grid-auto-rows: 65%;"), v("15%", "grid-auto-rows: 15%;"), v("100%", "grid-auto-rows: 100%;"), v("calc(24px)", "grid-auto-rows: calc(24px);"), v("clamp(24px, 2em, 48px)", "grid-auto-rows: clamp(24px, 2em, 48px);"), v("min(24px)", "grid-auto-rows: min(24px);"), v("max(24px)", "grid-auto-rows: max(24px);"), v("round(nearest, 24px, 2em)", "grid-auto-rows: round(nearest, 24px, 2em);"), v("abs(24px)", "grid-auto-rows: abs(24px);"), v("var(--my-var, 48px)", "grid-auto-rows: var(--my-var, 48px);"), v("env(my-ident, 48px)", "grid-auto-rows: env(my-ident, 48px);"), v("1fr", "grid-auto-rows: 1fr;"), v("2fr", "grid-auto-rows: 2fr;"), v("min-content", "grid-auto-rows: min-content;"), v("max-content", "grid-auto-rows: max-content;"), v("auto", "grid-auto-rows: auto;"), v("minmax(24px, 64px)", "grid-auto-rows: minmax(24px, 64px);"), v("fit-content(24px)", "grid-auto-rows: fit-content(24px);"), ], }, { number: 48, name: "grid-column", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003egrid-column\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e specifies a grid item's size and location within a \u003ca href=\"/en-US/docs/Glossary/Grid_Column\"\u003egrid column\u003c/a\u003e by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its \u003ca href=\"/en-US/docs/Glossary/Grid_Areas\"\u003egrid area\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "GridLineType , [ \"/\" , GridLineType ]", ebnf: "grid-column =\n GridLineType , [ \"/\" , GridLineType ]", valueType: "keyword", defaultValue: "auto/ my-ident", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cinteger [-∞,-1]\u003e", samples: ["-1", "-2", "-3"] }, { type: "\u003cinteger [1,∞]\u003e", samples: ["2", "3", "1", "5", "4"] }], values: [ v("auto/ auto", "grid-column: auto/ auto;"), v("auto/ my-ident", "grid-column: auto/ my-ident;"), v("auto/ tag-a", "grid-column: auto/ tag-a;"), v("auto/ 2 my-ident", "grid-column: auto/ 2 my-ident;"), v("auto/ 2 tag-a", "grid-column: auto/ 2 tag-a;"), v("auto/ 2", "grid-column: auto/ 2;"), v("auto/ 3 my-ident", "grid-column: auto/ 3 my-ident;"), v("auto/ 3 tag-a", "grid-column: auto/ 3 tag-a;"), v("auto/ 3", "grid-column: auto/ 3;"), v("auto/ 1 my-ident", "grid-column: auto/ 1 my-ident;"), v("auto/ 1 tag-a", "grid-column: auto/ 1 tag-a;"), v("auto/ 1", "grid-column: auto/ 1;"), v("auto/ 5 my-ident", "grid-column: auto/ 5 my-ident;"), v("auto/ 5 tag-a", "grid-column: auto/ 5 tag-a;"), v("auto/ 5", "grid-column: auto/ 5;"), v("auto/ 4 my-ident", "grid-column: auto/ 4 my-ident;"), v("auto/ 4 tag-a", "grid-column: auto/ 4 tag-a;"), v("auto/ 4", "grid-column: auto/ 4;"), v("auto/ -1 my-ident", "grid-column: auto/ -1 my-ident;"), v("auto/ -1 tag-a", "grid-column: auto/ -1 tag-a;"), v("auto/ -1", "grid-column: auto/ -1;"), v("auto/ -2 my-ident", "grid-column: auto/ -2 my-ident;"), v("auto/ -2 tag-a", "grid-column: auto/ -2 tag-a;"), v("auto/ -2", "grid-column: auto/ -2;"), v("auto/ -3 my-ident", "grid-column: auto/ -3 my-ident;"), v("auto/ -3 tag-a", "grid-column: auto/ -3 tag-a;"), v("auto/ -3", "grid-column: auto/ -3;"), v("auto/ span 2 my-ident", "grid-column: auto/ span 2 my-ident;"), v("auto/ span 2 tag-a", "grid-column: auto/ span 2 tag-a;"), v("auto/ span 2", "grid-column: auto/ span 2;"), v("auto/ span 3 my-ident", "grid-column: auto/ span 3 my-ident;"), v("auto/ span 3 tag-a", "grid-column: auto/ span 3 tag-a;"), v("auto/ span 3", "grid-column: auto/ span 3;"), v("auto/ span 1 my-ident", "grid-column: auto/ span 1 my-ident;"), v("auto/ span 1 tag-a", "grid-column: auto/ span 1 tag-a;"), v("auto/ span 1", "grid-column: auto/ span 1;"), v("auto/ span 5 my-ident", "grid-column: auto/ span 5 my-ident;"), v("auto/ span 5 tag-a", "grid-column: auto/ span 5 tag-a;"), v("auto/ span 5", "grid-column: auto/ span 5;"), v("auto/ span 4 my-ident", "grid-column: auto/ span 4 my-ident;"), v("auto/ span 4 tag-a", "grid-column: auto/ span 4 tag-a;"), v("auto/ span 4", "grid-column: auto/ span 4;"), v("auto/ span my-ident", "grid-column: auto/ span my-ident;"), v("auto/ span tag-a", "grid-column: auto/ span tag-a;"), v("auto/ span", "grid-column: auto/ span;"), v("auto", "grid-column: auto;"), v("my-ident/ auto", "grid-column: my-ident/ auto;"), v("my-ident/ my-ident", "grid-column: my-ident/ my-ident;"), v("my-ident/ tag-a", "grid-column: my-ident/ tag-a;"), v("my-ident/ 2 my-ident", "grid-column: my-ident/ 2 my-ident;"), ], }, { number: 49, name: "grid-column-end", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003egrid-column-end\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its \u003ca href=\"/en-US/docs/Glossary/Grid_Areas\"\u003egrid area\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "GridLineType", ebnf: "grid-column-end =\n GridLineType", valueType: "keyword", defaultValue: "my-ident", related: [], provenance: "assisted", truncated: false, trueCount: 45, shown: 45, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cinteger [-∞,-1]\u003e", samples: ["-1", "-2", "-3"] }, { type: "\u003cinteger [1,∞]\u003e", samples: ["2", "3", "1", "5", "4"] }], values: [ v("auto", "grid-column-end: auto;"), v("my-ident", "grid-column-end: my-ident;"), v("tag-a", "grid-column-end: tag-a;"), v("2 my-ident", "grid-column-end: 2 my-ident;"), v("2 tag-a", "grid-column-end: 2 tag-a;"), v("2", "grid-column-end: 2;"), v("3 my-ident", "grid-column-end: 3 my-ident;"), v("3 tag-a", "grid-column-end: 3 tag-a;"), v("3", "grid-column-end: 3;"), v("1 my-ident", "grid-column-end: 1 my-ident;"), v("1 tag-a", "grid-column-end: 1 tag-a;"), v("1", "grid-column-end: 1;"), v("5 my-ident", "grid-column-end: 5 my-ident;"), v("5 tag-a", "grid-column-end: 5 tag-a;"), v("5", "grid-column-end: 5;"), v("4 my-ident", "grid-column-end: 4 my-ident;"), v("4 tag-a", "grid-column-end: 4 tag-a;"), v("4", "grid-column-end: 4;"), v("-1 my-ident", "grid-column-end: -1 my-ident;"), v("-1 tag-a", "grid-column-end: -1 tag-a;"), v("-1", "grid-column-end: -1;"), v("-2 my-ident", "grid-column-end: -2 my-ident;"), v("-2 tag-a", "grid-column-end: -2 tag-a;"), v("-2", "grid-column-end: -2;"), v("-3 my-ident", "grid-column-end: -3 my-ident;"), v("-3 tag-a", "grid-column-end: -3 tag-a;"), v("-3", "grid-column-end: -3;"), v("span 2 my-ident", "grid-column-end: span 2 my-ident;"), v("span 2 tag-a", "grid-column-end: span 2 tag-a;"), v("span 2", "grid-column-end: span 2;"), v("span 3 my-ident", "grid-column-end: span 3 my-ident;"), v("span 3 tag-a", "grid-column-end: span 3 tag-a;"), v("span 3", "grid-column-end: span 3;"), v("span 1 my-ident", "grid-column-end: span 1 my-ident;"), v("span 1 tag-a", "grid-column-end: span 1 tag-a;"), v("span 1", "grid-column-end: span 1;"), v("span 5 my-ident", "grid-column-end: span 5 my-ident;"), v("span 5 tag-a", "grid-column-end: span 5 tag-a;"), v("span 5", "grid-column-end: span 5;"), v("span 4 my-ident", "grid-column-end: span 4 my-ident;"), v("span 4 tag-a", "grid-column-end: span 4 tag-a;"), v("span 4", "grid-column-end: span 4;"), v("span my-ident", "grid-column-end: span my-ident;"), v("span tag-a", "grid-column-end: span tag-a;"), v("span", "grid-column-end: span;"), ], }, { number: 50, name: "grid-column-gap", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecolumn-gap\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the size of the gap (\u003ca href=\"/en-US/docs/Glossary/Gutters\"\u003egutter\u003c/a\u003e) between an element's columns.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LengthPercentageType | \"normal\"", ebnf: "grid-column-gap =\n LengthPercentageType | \"normal\"", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 20, shown: 20, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "grid-column-gap: 24px;"), v("48px", "grid-column-gap: 48px;"), v("8px", "grid-column-gap: 8px;"), v("16px", "grid-column-gap: 16px;"), v("64px", "grid-column-gap: 64px;"), v("50%", "grid-column-gap: 50%;"), v("80%", "grid-column-gap: 80%;"), v("30%", "grid-column-gap: 30%;"), v("65%", "grid-column-gap: 65%;"), v("15%", "grid-column-gap: 15%;"), v("100%", "grid-column-gap: 100%;"), v("calc(24px)", "grid-column-gap: calc(24px);"), v("clamp(24px, 2em, 48px)", "grid-column-gap: clamp(24px, 2em, 48px);"), v("min(24px)", "grid-column-gap: min(24px);"), v("max(24px)", "grid-column-gap: max(24px);"), v("round(nearest, 24px, 2em)", "grid-column-gap: round(nearest, 24px, 2em);"), v("abs(24px)", "grid-column-gap: abs(24px);"), v("var(--my-var, 48px)", "grid-column-gap: var(--my-var, 48px);"), v("env(my-ident, 48px)", "grid-column-gap: env(my-ident, 48px);"), v("normal", "grid-column-gap: normal;"), ], }, { number: 51, name: "grid-column-start", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003egrid-column-start\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the \u003ca href=\"/en-US/docs/Glossary/Grid_Areas\"\u003egrid area\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "GridLineType", ebnf: "grid-column-start =\n GridLineType", valueType: "keyword", defaultValue: "my-ident", related: [], provenance: "assisted", truncated: false, trueCount: 45, shown: 45, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cinteger [-∞,-1]\u003e", samples: ["-1", "-2", "-3"] }, { type: "\u003cinteger [1,∞]\u003e", samples: ["2", "3", "1", "5", "4"] }], values: [ v("auto", "grid-column-start: auto;"), v("my-ident", "grid-column-start: my-ident;"), v("tag-a", "grid-column-start: tag-a;"), v("2 my-ident", "grid-column-start: 2 my-ident;"), v("2 tag-a", "grid-column-start: 2 tag-a;"), v("2", "grid-column-start: 2;"), v("3 my-ident", "grid-column-start: 3 my-ident;"), v("3 tag-a", "grid-column-start: 3 tag-a;"), v("3", "grid-column-start: 3;"), v("1 my-ident", "grid-column-start: 1 my-ident;"), v("1 tag-a", "grid-column-start: 1 tag-a;"), v("1", "grid-column-start: 1;"), v("5 my-ident", "grid-column-start: 5 my-ident;"), v("5 tag-a", "grid-column-start: 5 tag-a;"), v("5", "grid-column-start: 5;"), v("4 my-ident", "grid-column-start: 4 my-ident;"), v("4 tag-a", "grid-column-start: 4 tag-a;"), v("4", "grid-column-start: 4;"), v("-1 my-ident", "grid-column-start: -1 my-ident;"), v("-1 tag-a", "grid-column-start: -1 tag-a;"), v("-1", "grid-column-start: -1;"), v("-2 my-ident", "grid-column-start: -2 my-ident;"), v("-2 tag-a", "grid-column-start: -2 tag-a;"), v("-2", "grid-column-start: -2;"), v("-3 my-ident", "grid-column-start: -3 my-ident;"), v("-3 tag-a", "grid-column-start: -3 tag-a;"), v("-3", "grid-column-start: -3;"), v("span 2 my-ident", "grid-column-start: span 2 my-ident;"), v("span 2 tag-a", "grid-column-start: span 2 tag-a;"), v("span 2", "grid-column-start: span 2;"), v("span 3 my-ident", "grid-column-start: span 3 my-ident;"), v("span 3 tag-a", "grid-column-start: span 3 tag-a;"), v("span 3", "grid-column-start: span 3;"), v("span 1 my-ident", "grid-column-start: span 1 my-ident;"), v("span 1 tag-a", "grid-column-start: span 1 tag-a;"), v("span 1", "grid-column-start: span 1;"), v("span 5 my-ident", "grid-column-start: span 5 my-ident;"), v("span 5 tag-a", "grid-column-start: span 5 tag-a;"), v("span 5", "grid-column-start: span 5;"), v("span 4 my-ident", "grid-column-start: span 4 my-ident;"), v("span 4 tag-a", "grid-column-start: span 4 tag-a;"), v("span 4", "grid-column-start: span 4;"), v("span my-ident", "grid-column-start: span my-ident;"), v("span tag-a", "grid-column-start: span tag-a;"), v("span", "grid-column-start: span;"), ], }, { number: 52, name: "grid-gap", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003egap\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e sets the gaps (also called \u003ca href=\"/en-US/docs/Glossary/Gutters\"\u003egutters\u003c/a\u003e) between rows and columns. This property applies to \u003ca href=\"/en-US/docs/Web/CSS/Guides/Multicol_layout\"\u003emulti-column\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Guides/Flexible_box_layout\"\u003eflex\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Guides/Grid_layout\"\u003egrid\u003c/a\u003e containers.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "( LengthPercentageType | \"normal\" ) , [ LengthPercentageType | \"normal\" ]", ebnf: "grid-gap =\n ( LengthPercentageType | \"normal\" ) , [ LengthPercentageType | \"normal\" ]", valueType: "length", defaultValue: "24px 48px", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px 24px", "grid-gap: 24px 24px;"), v("24px 48px", "grid-gap: 24px 48px;"), v("24px 8px", "grid-gap: 24px 8px;"), v("24px 16px", "grid-gap: 24px 16px;"), v("24px 64px", "grid-gap: 24px 64px;"), v("24px 50%", "grid-gap: 24px 50%;"), v("24px 80%", "grid-gap: 24px 80%;"), v("24px 30%", "grid-gap: 24px 30%;"), v("24px 65%", "grid-gap: 24px 65%;"), v("24px 15%", "grid-gap: 24px 15%;"), v("24px 100%", "grid-gap: 24px 100%;"), v("24px calc(24px)", "grid-gap: 24px calc(24px);"), v("24px clamp(24px, 2em, 48px)", "grid-gap: 24px clamp(24px, 2em, 48px);"), v("24px min(24px)", "grid-gap: 24px min(24px);"), v("24px max(24px)", "grid-gap: 24px max(24px);"), v("24px round(nearest, 24px, 2em)", "grid-gap: 24px round(nearest, 24px, 2em);"), v("24px abs(24px)", "grid-gap: 24px abs(24px);"), v("24px var(--my-var, 48px)", "grid-gap: 24px var(--my-var, 48px);"), v("24px env(my-ident, 48px)", "grid-gap: 24px env(my-ident, 48px);"), v("24px normal", "grid-gap: 24px normal;"), v("24px", "grid-gap: 24px;"), v("48px 24px", "grid-gap: 48px 24px;"), v("48px 48px", "grid-gap: 48px 48px;"), v("48px 8px", "grid-gap: 48px 8px;"), v("48px 16px", "grid-gap: 48px 16px;"), v("48px 64px", "grid-gap: 48px 64px;"), v("48px 50%", "grid-gap: 48px 50%;"), v("48px 80%", "grid-gap: 48px 80%;"), v("48px 30%", "grid-gap: 48px 30%;"), v("48px 65%", "grid-gap: 48px 65%;"), v("48px 15%", "grid-gap: 48px 15%;"), v("48px 100%", "grid-gap: 48px 100%;"), v("48px calc(24px)", "grid-gap: 48px calc(24px);"), v("48px clamp(24px, 2em, 48px)", "grid-gap: 48px clamp(24px, 2em, 48px);"), v("48px min(24px)", "grid-gap: 48px min(24px);"), v("48px max(24px)", "grid-gap: 48px max(24px);"), v("48px round(nearest, 24px, 2em)", "grid-gap: 48px round(nearest, 24px, 2em);"), v("48px abs(24px)", "grid-gap: 48px abs(24px);"), v("48px var(--my-var, 48px)", "grid-gap: 48px var(--my-var, 48px);"), v("48px env(my-ident, 48px)", "grid-gap: 48px env(my-ident, 48px);"), v("48px normal", "grid-gap: 48px normal;"), v("48px", "grid-gap: 48px;"), v("8px 24px", "grid-gap: 8px 24px;"), v("8px 48px", "grid-gap: 8px 48px;"), v("8px 8px", "grid-gap: 8px 8px;"), v("8px 16px", "grid-gap: 8px 16px;"), v("8px 64px", "grid-gap: 8px 64px;"), v("8px 50%", "grid-gap: 8px 50%;"), v("8px 80%", "grid-gap: 8px 80%;"), v("8px 30%", "grid-gap: 8px 30%;"), ], }, { number: 53, name: "grid-row", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003egrid-row\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e specifies a grid item's size and location within a \u003ca href=\"/en-US/docs/Glossary/Grid_Row\"\u003egrid row\u003c/a\u003e by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its \u003ca href=\"/en-US/docs/Glossary/Grid_Areas\"\u003egrid area\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "GridLineType , [ \"/\" , GridLineType ]", ebnf: "grid-row =\n GridLineType , [ \"/\" , GridLineType ]", valueType: "keyword", defaultValue: "auto/ my-ident", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cinteger [-∞,-1]\u003e", samples: ["-1", "-2", "-3"] }, { type: "\u003cinteger [1,∞]\u003e", samples: ["2", "3", "1", "5", "4"] }], values: [ v("auto/ auto", "grid-row: auto/ auto;"), v("auto/ my-ident", "grid-row: auto/ my-ident;"), v("auto/ tag-a", "grid-row: auto/ tag-a;"), v("auto/ 2 my-ident", "grid-row: auto/ 2 my-ident;"), v("auto/ 2 tag-a", "grid-row: auto/ 2 tag-a;"), v("auto/ 2", "grid-row: auto/ 2;"), v("auto/ 3 my-ident", "grid-row: auto/ 3 my-ident;"), v("auto/ 3 tag-a", "grid-row: auto/ 3 tag-a;"), v("auto/ 3", "grid-row: auto/ 3;"), v("auto/ 1 my-ident", "grid-row: auto/ 1 my-ident;"), v("auto/ 1 tag-a", "grid-row: auto/ 1 tag-a;"), v("auto/ 1", "grid-row: auto/ 1;"), v("auto/ 5 my-ident", "grid-row: auto/ 5 my-ident;"), v("auto/ 5 tag-a", "grid-row: auto/ 5 tag-a;"), v("auto/ 5", "grid-row: auto/ 5;"), v("auto/ 4 my-ident", "grid-row: auto/ 4 my-ident;"), v("auto/ 4 tag-a", "grid-row: auto/ 4 tag-a;"), v("auto/ 4", "grid-row: auto/ 4;"), v("auto/ -1 my-ident", "grid-row: auto/ -1 my-ident;"), v("auto/ -1 tag-a", "grid-row: auto/ -1 tag-a;"), v("auto/ -1", "grid-row: auto/ -1;"), v("auto/ -2 my-ident", "grid-row: auto/ -2 my-ident;"), v("auto/ -2 tag-a", "grid-row: auto/ -2 tag-a;"), v("auto/ -2", "grid-row: auto/ -2;"), v("auto/ -3 my-ident", "grid-row: auto/ -3 my-ident;"), v("auto/ -3 tag-a", "grid-row: auto/ -3 tag-a;"), v("auto/ -3", "grid-row: auto/ -3;"), v("auto/ span 2 my-ident", "grid-row: auto/ span 2 my-ident;"), v("auto/ span 2 tag-a", "grid-row: auto/ span 2 tag-a;"), v("auto/ span 2", "grid-row: auto/ span 2;"), v("auto/ span 3 my-ident", "grid-row: auto/ span 3 my-ident;"), v("auto/ span 3 tag-a", "grid-row: auto/ span 3 tag-a;"), v("auto/ span 3", "grid-row: auto/ span 3;"), v("auto/ span 1 my-ident", "grid-row: auto/ span 1 my-ident;"), v("auto/ span 1 tag-a", "grid-row: auto/ span 1 tag-a;"), v("auto/ span 1", "grid-row: auto/ span 1;"), v("auto/ span 5 my-ident", "grid-row: auto/ span 5 my-ident;"), v("auto/ span 5 tag-a", "grid-row: auto/ span 5 tag-a;"), v("auto/ span 5", "grid-row: auto/ span 5;"), v("auto/ span 4 my-ident", "grid-row: auto/ span 4 my-ident;"), v("auto/ span 4 tag-a", "grid-row: auto/ span 4 tag-a;"), v("auto/ span 4", "grid-row: auto/ span 4;"), v("auto/ span my-ident", "grid-row: auto/ span my-ident;"), v("auto/ span tag-a", "grid-row: auto/ span tag-a;"), v("auto/ span", "grid-row: auto/ span;"), v("auto", "grid-row: auto;"), v("my-ident/ auto", "grid-row: my-ident/ auto;"), v("my-ident/ my-ident", "grid-row: my-ident/ my-ident;"), v("my-ident/ tag-a", "grid-row: my-ident/ tag-a;"), v("my-ident/ 2 my-ident", "grid-row: my-ident/ 2 my-ident;"), ], }, { number: 54, name: "grid-row-end", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003egrid-row-end\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its \u003ca href=\"/en-US/docs/Glossary/Grid_Areas\"\u003egrid area\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "GridLineType", ebnf: "grid-row-end =\n GridLineType", valueType: "keyword", defaultValue: "my-ident", related: [], provenance: "assisted", truncated: false, trueCount: 45, shown: 45, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cinteger [-∞,-1]\u003e", samples: ["-1", "-2", "-3"] }, { type: "\u003cinteger [1,∞]\u003e", samples: ["2", "3", "1", "5", "4"] }], values: [ v("auto", "grid-row-end: auto;"), v("my-ident", "grid-row-end: my-ident;"), v("tag-a", "grid-row-end: tag-a;"), v("2 my-ident", "grid-row-end: 2 my-ident;"), v("2 tag-a", "grid-row-end: 2 tag-a;"), v("2", "grid-row-end: 2;"), v("3 my-ident", "grid-row-end: 3 my-ident;"), v("3 tag-a", "grid-row-end: 3 tag-a;"), v("3", "grid-row-end: 3;"), v("1 my-ident", "grid-row-end: 1 my-ident;"), v("1 tag-a", "grid-row-end: 1 tag-a;"), v("1", "grid-row-end: 1;"), v("5 my-ident", "grid-row-end: 5 my-ident;"), v("5 tag-a", "grid-row-end: 5 tag-a;"), v("5", "grid-row-end: 5;"), v("4 my-ident", "grid-row-end: 4 my-ident;"), v("4 tag-a", "grid-row-end: 4 tag-a;"), v("4", "grid-row-end: 4;"), v("-1 my-ident", "grid-row-end: -1 my-ident;"), v("-1 tag-a", "grid-row-end: -1 tag-a;"), v("-1", "grid-row-end: -1;"), v("-2 my-ident", "grid-row-end: -2 my-ident;"), v("-2 tag-a", "grid-row-end: -2 tag-a;"), v("-2", "grid-row-end: -2;"), v("-3 my-ident", "grid-row-end: -3 my-ident;"), v("-3 tag-a", "grid-row-end: -3 tag-a;"), v("-3", "grid-row-end: -3;"), v("span 2 my-ident", "grid-row-end: span 2 my-ident;"), v("span 2 tag-a", "grid-row-end: span 2 tag-a;"), v("span 2", "grid-row-end: span 2;"), v("span 3 my-ident", "grid-row-end: span 3 my-ident;"), v("span 3 tag-a", "grid-row-end: span 3 tag-a;"), v("span 3", "grid-row-end: span 3;"), v("span 1 my-ident", "grid-row-end: span 1 my-ident;"), v("span 1 tag-a", "grid-row-end: span 1 tag-a;"), v("span 1", "grid-row-end: span 1;"), v("span 5 my-ident", "grid-row-end: span 5 my-ident;"), v("span 5 tag-a", "grid-row-end: span 5 tag-a;"), v("span 5", "grid-row-end: span 5;"), v("span 4 my-ident", "grid-row-end: span 4 my-ident;"), v("span 4 tag-a", "grid-row-end: span 4 tag-a;"), v("span 4", "grid-row-end: span 4;"), v("span my-ident", "grid-row-end: span my-ident;"), v("span tag-a", "grid-row-end: span tag-a;"), v("span", "grid-row-end: span;"), ], }, { number: 55, name: "grid-row-gap", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003erow-gap\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the size of the gap (\u003ca href=\"/en-US/docs/Glossary/Gutters\"\u003egutter\u003c/a\u003e) between an element's rows.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LengthPercentageType | \"normal\"", ebnf: "grid-row-gap =\n LengthPercentageType | \"normal\"", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 20, shown: 20, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "grid-row-gap: 24px;"), v("48px", "grid-row-gap: 48px;"), v("8px", "grid-row-gap: 8px;"), v("16px", "grid-row-gap: 16px;"), v("64px", "grid-row-gap: 64px;"), v("50%", "grid-row-gap: 50%;"), v("80%", "grid-row-gap: 80%;"), v("30%", "grid-row-gap: 30%;"), v("65%", "grid-row-gap: 65%;"), v("15%", "grid-row-gap: 15%;"), v("100%", "grid-row-gap: 100%;"), v("calc(24px)", "grid-row-gap: calc(24px);"), v("clamp(24px, 2em, 48px)", "grid-row-gap: clamp(24px, 2em, 48px);"), v("min(24px)", "grid-row-gap: min(24px);"), v("max(24px)", "grid-row-gap: max(24px);"), v("round(nearest, 24px, 2em)", "grid-row-gap: round(nearest, 24px, 2em);"), v("abs(24px)", "grid-row-gap: abs(24px);"), v("var(--my-var, 48px)", "grid-row-gap: var(--my-var, 48px);"), v("env(my-ident, 48px)", "grid-row-gap: env(my-ident, 48px);"), v("normal", "grid-row-gap: normal;"), ], }, { number: 56, name: "grid-row-start", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003egrid-row-start\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its \u003ca href=\"/en-US/docs/Glossary/Grid_Areas\"\u003egrid area\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "GridLineType", ebnf: "grid-row-start =\n GridLineType", valueType: "keyword", defaultValue: "my-ident", related: [], provenance: "assisted", truncated: false, trueCount: 45, shown: 45, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cinteger [-∞,-1]\u003e", samples: ["-1", "-2", "-3"] }, { type: "\u003cinteger [1,∞]\u003e", samples: ["2", "3", "1", "5", "4"] }], values: [ v("auto", "grid-row-start: auto;"), v("my-ident", "grid-row-start: my-ident;"), v("tag-a", "grid-row-start: tag-a;"), v("2 my-ident", "grid-row-start: 2 my-ident;"), v("2 tag-a", "grid-row-start: 2 tag-a;"), v("2", "grid-row-start: 2;"), v("3 my-ident", "grid-row-start: 3 my-ident;"), v("3 tag-a", "grid-row-start: 3 tag-a;"), v("3", "grid-row-start: 3;"), v("1 my-ident", "grid-row-start: 1 my-ident;"), v("1 tag-a", "grid-row-start: 1 tag-a;"), v("1", "grid-row-start: 1;"), v("5 my-ident", "grid-row-start: 5 my-ident;"), v("5 tag-a", "grid-row-start: 5 tag-a;"), v("5", "grid-row-start: 5;"), v("4 my-ident", "grid-row-start: 4 my-ident;"), v("4 tag-a", "grid-row-start: 4 tag-a;"), v("4", "grid-row-start: 4;"), v("-1 my-ident", "grid-row-start: -1 my-ident;"), v("-1 tag-a", "grid-row-start: -1 tag-a;"), v("-1", "grid-row-start: -1;"), v("-2 my-ident", "grid-row-start: -2 my-ident;"), v("-2 tag-a", "grid-row-start: -2 tag-a;"), v("-2", "grid-row-start: -2;"), v("-3 my-ident", "grid-row-start: -3 my-ident;"), v("-3 tag-a", "grid-row-start: -3 tag-a;"), v("-3", "grid-row-start: -3;"), v("span 2 my-ident", "grid-row-start: span 2 my-ident;"), v("span 2 tag-a", "grid-row-start: span 2 tag-a;"), v("span 2", "grid-row-start: span 2;"), v("span 3 my-ident", "grid-row-start: span 3 my-ident;"), v("span 3 tag-a", "grid-row-start: span 3 tag-a;"), v("span 3", "grid-row-start: span 3;"), v("span 1 my-ident", "grid-row-start: span 1 my-ident;"), v("span 1 tag-a", "grid-row-start: span 1 tag-a;"), v("span 1", "grid-row-start: span 1;"), v("span 5 my-ident", "grid-row-start: span 5 my-ident;"), v("span 5 tag-a", "grid-row-start: span 5 tag-a;"), v("span 5", "grid-row-start: span 5;"), v("span 4 my-ident", "grid-row-start: span 4 my-ident;"), v("span 4 tag-a", "grid-row-start: span 4 tag-a;"), v("span 4", "grid-row-start: span 4;"), v("span my-ident", "grid-row-start: span my-ident;"), v("span tag-a", "grid-row-start: span tag-a;"), v("span", "grid-row-start: span;"), ], }, { number: 57, name: "grid-template", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003egrid-template\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property is a \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e for defining \u003ca href=\"/en-US/docs/Glossary/Grid_Column\"\u003egrid columns\u003c/a\u003e, \u003ca href=\"/en-US/docs/Glossary/Grid_Row\"\u003egrid rows\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Glossary/Grid_Areas\"\u003egrid areas\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | GridTemplateRowsProp , \"/\" , GridTemplateColumnsProp | GridTemplatePropItem , { GridTemplatePropItem } , [ \"/\" , ExplicitTrackListType ]", ebnf: "grid-template =\n \"none\" | GridTemplateRowsProp , \"/\" , GridTemplateColumnsProp | GridTemplatePropItem , { GridTemplatePropItem } , [ \"/\" , ExplicitTrackListType ]", valueType: "length", defaultValue: "none/ none", related: [], provenance: "assisted", truncated: true, trueCount: 321, shown: 50, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003cflex [0,∞]\u003e", samples: ["1fr", "2fr"] }, { type: "\u003cinteger\u003e", samples: ["2", "1", "3", "5", "4"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cstring\u003e", samples: ["\"Specimen\"", "\"Aa\""] }], values: [ v("none", "grid-template: none;"), v("none/ none", "grid-template: none/ none;"), v("none/ [ my-ident ] 24px [ my-ident ]", "grid-template: none/ [ my-ident ] 24px [ my-ident ];"), v("none/ [ my-ident ] 24px [ tag-a ]", "grid-template: none/ [ my-ident ] 24px [ tag-a ];"), v("none/ [ my-ident ] 24px", "grid-template: none/ [ my-ident ] 24px;"), v("none/ [ my-ident ] 48px [ my-ident ]", "grid-template: none/ [ my-ident ] 48px [ my-ident ];"), v("none/ [ my-ident ] 48px [ tag-a ]", "grid-template: none/ [ my-ident ] 48px [ tag-a ];"), v("none/ [ my-ident ] 48px", "grid-template: none/ [ my-ident ] 48px;"), v("none/ [ my-ident ] 8px [ my-ident ]", "grid-template: none/ [ my-ident ] 8px [ my-ident ];"), v("none/ [ my-ident ] 8px [ tag-a ]", "grid-template: none/ [ my-ident ] 8px [ tag-a ];"), v("none/ [ my-ident ] 8px", "grid-template: none/ [ my-ident ] 8px;"), v("none/ [ my-ident ] 16px [ my-ident ]", "grid-template: none/ [ my-ident ] 16px [ my-ident ];"), v("none/ [ my-ident ] 16px [ tag-a ]", "grid-template: none/ [ my-ident ] 16px [ tag-a ];"), v("none/ [ my-ident ] 16px", "grid-template: none/ [ my-ident ] 16px;"), v("none/ [ my-ident ] 64px [ my-ident ]", "grid-template: none/ [ my-ident ] 64px [ my-ident ];"), v("none/ [ my-ident ] 64px [ tag-a ]", "grid-template: none/ [ my-ident ] 64px [ tag-a ];"), v("none/ [ my-ident ] 64px", "grid-template: none/ [ my-ident ] 64px;"), v("none/ [ my-ident ] 50% [ my-ident ]", "grid-template: none/ [ my-ident ] 50% [ my-ident ];"), v("none/ [ my-ident ] 50% [ tag-a ]", "grid-template: none/ [ my-ident ] 50% [ tag-a ];"), v("none/ [ my-ident ] 50%", "grid-template: none/ [ my-ident ] 50%;"), v("none/ [ my-ident ] 80% [ my-ident ]", "grid-template: none/ [ my-ident ] 80% [ my-ident ];"), v("none/ [ my-ident ] 80% [ tag-a ]", "grid-template: none/ [ my-ident ] 80% [ tag-a ];"), v("none/ [ my-ident ] 80%", "grid-template: none/ [ my-ident ] 80%;"), v("none/ [ my-ident ] 30% [ my-ident ]", "grid-template: none/ [ my-ident ] 30% [ my-ident ];"), v("none/ [ my-ident ] 30% [ tag-a ]", "grid-template: none/ [ my-ident ] 30% [ tag-a ];"), v("none/ [ my-ident ] 30%", "grid-template: none/ [ my-ident ] 30%;"), v("none/ [ my-ident ] 65% [ my-ident ]", "grid-template: none/ [ my-ident ] 65% [ my-ident ];"), v("none/ [ my-ident ] 65% [ tag-a ]", "grid-template: none/ [ my-ident ] 65% [ tag-a ];"), v("none/ [ my-ident ] 65%", "grid-template: none/ [ my-ident ] 65%;"), v("none/ [ my-ident ] 15% [ my-ident ]", "grid-template: none/ [ my-ident ] 15% [ my-ident ];"), v("none/ [ my-ident ] 15% [ tag-a ]", "grid-template: none/ [ my-ident ] 15% [ tag-a ];"), v("none/ [ my-ident ] 15%", "grid-template: none/ [ my-ident ] 15%;"), v("none/ [ my-ident ] 100% [ my-ident ]", "grid-template: none/ [ my-ident ] 100% [ my-ident ];"), v("none/ [ my-ident ] 100% [ tag-a ]", "grid-template: none/ [ my-ident ] 100% [ tag-a ];"), v("none/ [ my-ident ] 100%", "grid-template: none/ [ my-ident ] 100%;"), v("none/ [ my-ident ] calc(24px) [ my-ident ]", "grid-template: none/ [ my-ident ] calc(24px) [ my-ident ];"), v("none/ [ my-ident ] calc(24px) [ tag-a ]", "grid-template: none/ [ my-ident ] calc(24px) [ tag-a ];"), v("none/ [ my-ident ] calc(24px)", "grid-template: none/ [ my-ident ] calc(24px);"), v("none/ [ my-ident ] clamp(24px, 2em, 48px) [ my-ident ]", "grid-template: none/ [ my-ident ] clamp(24px, 2em, 48px) [ my-ident ];"), v("none/ [ my-ident ] clamp(24px, 2em, 48px) [ tag-a ]", "grid-template: none/ [ my-ident ] clamp(24px, 2em, 48px) [ tag-a ];"), v("none/ [ my-ident ] clamp(24px, 2em, 48px)", "grid-template: none/ [ my-ident ] clamp(24px, 2em, 48px);"), v("none/ [ my-ident ] min(24px) [ my-ident ]", "grid-template: none/ [ my-ident ] min(24px) [ my-ident ];"), v("none/ [ my-ident ] min(24px) [ tag-a ]", "grid-template: none/ [ my-ident ] min(24px) [ tag-a ];"), v("none/ [ my-ident ] min(24px)", "grid-template: none/ [ my-ident ] min(24px);"), v("none/ [ my-ident ] max(24px) [ my-ident ]", "grid-template: none/ [ my-ident ] max(24px) [ my-ident ];"), v("none/ [ my-ident ] max(24px) [ tag-a ]", "grid-template: none/ [ my-ident ] max(24px) [ tag-a ];"), v("none/ [ my-ident ] max(24px)", "grid-template: none/ [ my-ident ] max(24px);"), v("none/ [ my-ident ] round(nearest, 24px, 2em) [ my-ident ]", "grid-template: none/ [ my-ident ] round(nearest, 24px, 2em) [ my-ident ];"), v("none/ [ my-ident ] round(nearest, 24px, 2em) [ tag-a ]", "grid-template: none/ [ my-ident ] round(nearest, 24px, 2em) [ tag-a ];"), v("none/ [ my-ident ] round(nearest, 24px, 2em)", "grid-template: none/ [ my-ident ] round(nearest, 24px, 2em);"), ], }, { number: 58, name: "grid-template-areas", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003egrid-template-areas\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies named \u003ca href=\"/en-US/docs/Glossary/Grid_Areas\"\u003egrid areas\u003c/a\u003e, establishing the cells in the grid and assigning them names.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | string_type , { string_type }", ebnf: "grid-template-areas =\n \"none\" | string_type , { string_type }", valueType: "keyword", defaultValue: "\"Specimen\"", related: [], provenance: "assisted", truncated: false, trueCount: 3, shown: 3, assists: [{ type: "\u003cstring\u003e", samples: ["\"Specimen\"", "\"Aa\""] }], values: [ v("none", "grid-template-areas: none;"), v("\"Specimen\"", "grid-template-areas: \"Specimen\";"), v("\"Aa\"", "grid-template-areas: \"Aa\";"), ], }, { number: 59, name: "grid-template-columns", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003egrid-template-columns\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the line names and track sizing functions of the \u003ca href=\"/en-US/docs/Glossary/Grid_Column\"\u003egrid columns\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | TrackListType | AutoTrackListType | \"subgrid\" , [ LineNameListType ]", ebnf: "grid-template-columns =\n \"none\" | TrackListType | AutoTrackListType | \"subgrid\" , [ LineNameListType ]", valueType: "length", defaultValue: "[ my-ident ] 24px [ my-ident ]", related: [], provenance: "assisted", truncated: true, trueCount: 183, shown: 50, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003cflex [0,∞]\u003e", samples: ["1fr", "2fr"] }, { type: "\u003cinteger\u003e", samples: ["2", "1", "3", "5", "4"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("none", "grid-template-columns: none;"), v("[ my-ident ] 24px [ my-ident ]", "grid-template-columns: [ my-ident ] 24px [ my-ident ];"), v("[ my-ident ] 24px [ tag-a ]", "grid-template-columns: [ my-ident ] 24px [ tag-a ];"), v("[ my-ident ] 24px", "grid-template-columns: [ my-ident ] 24px;"), v("[ my-ident ] 48px [ my-ident ]", "grid-template-columns: [ my-ident ] 48px [ my-ident ];"), v("[ my-ident ] 48px [ tag-a ]", "grid-template-columns: [ my-ident ] 48px [ tag-a ];"), v("[ my-ident ] 48px", "grid-template-columns: [ my-ident ] 48px;"), v("[ my-ident ] 8px [ my-ident ]", "grid-template-columns: [ my-ident ] 8px [ my-ident ];"), v("[ my-ident ] 8px [ tag-a ]", "grid-template-columns: [ my-ident ] 8px [ tag-a ];"), v("[ my-ident ] 8px", "grid-template-columns: [ my-ident ] 8px;"), v("[ my-ident ] 16px [ my-ident ]", "grid-template-columns: [ my-ident ] 16px [ my-ident ];"), v("[ my-ident ] 16px [ tag-a ]", "grid-template-columns: [ my-ident ] 16px [ tag-a ];"), v("[ my-ident ] 16px", "grid-template-columns: [ my-ident ] 16px;"), v("[ my-ident ] 64px [ my-ident ]", "grid-template-columns: [ my-ident ] 64px [ my-ident ];"), v("[ my-ident ] 64px [ tag-a ]", "grid-template-columns: [ my-ident ] 64px [ tag-a ];"), v("[ my-ident ] 64px", "grid-template-columns: [ my-ident ] 64px;"), v("[ my-ident ] 50% [ my-ident ]", "grid-template-columns: [ my-ident ] 50% [ my-ident ];"), v("[ my-ident ] 50% [ tag-a ]", "grid-template-columns: [ my-ident ] 50% [ tag-a ];"), v("[ my-ident ] 50%", "grid-template-columns: [ my-ident ] 50%;"), v("[ my-ident ] 80% [ my-ident ]", "grid-template-columns: [ my-ident ] 80% [ my-ident ];"), v("[ my-ident ] 80% [ tag-a ]", "grid-template-columns: [ my-ident ] 80% [ tag-a ];"), v("[ my-ident ] 80%", "grid-template-columns: [ my-ident ] 80%;"), v("[ my-ident ] 30% [ my-ident ]", "grid-template-columns: [ my-ident ] 30% [ my-ident ];"), v("[ my-ident ] 30% [ tag-a ]", "grid-template-columns: [ my-ident ] 30% [ tag-a ];"), v("[ my-ident ] 30%", "grid-template-columns: [ my-ident ] 30%;"), v("[ my-ident ] 65% [ my-ident ]", "grid-template-columns: [ my-ident ] 65% [ my-ident ];"), v("[ my-ident ] 65% [ tag-a ]", "grid-template-columns: [ my-ident ] 65% [ tag-a ];"), v("[ my-ident ] 65%", "grid-template-columns: [ my-ident ] 65%;"), v("[ my-ident ] 15% [ my-ident ]", "grid-template-columns: [ my-ident ] 15% [ my-ident ];"), v("[ my-ident ] 15% [ tag-a ]", "grid-template-columns: [ my-ident ] 15% [ tag-a ];"), v("[ my-ident ] 15%", "grid-template-columns: [ my-ident ] 15%;"), v("[ my-ident ] 100% [ my-ident ]", "grid-template-columns: [ my-ident ] 100% [ my-ident ];"), v("[ my-ident ] 100% [ tag-a ]", "grid-template-columns: [ my-ident ] 100% [ tag-a ];"), v("[ my-ident ] 100%", "grid-template-columns: [ my-ident ] 100%;"), v("[ my-ident ] calc(24px) [ my-ident ]", "grid-template-columns: [ my-ident ] calc(24px) [ my-ident ];"), v("[ my-ident ] calc(24px) [ tag-a ]", "grid-template-columns: [ my-ident ] calc(24px) [ tag-a ];"), v("[ my-ident ] calc(24px)", "grid-template-columns: [ my-ident ] calc(24px);"), v("[ my-ident ] clamp(24px, 2em, 48px) [ my-ident ]", "grid-template-columns: [ my-ident ] clamp(24px, 2em, 48px) [ my-ident ];"), v("[ my-ident ] clamp(24px, 2em, 48px) [ tag-a ]", "grid-template-columns: [ my-ident ] clamp(24px, 2em, 48px) [ tag-a ];"), v("[ my-ident ] clamp(24px, 2em, 48px)", "grid-template-columns: [ my-ident ] clamp(24px, 2em, 48px);"), v("[ my-ident ] min(24px) [ my-ident ]", "grid-template-columns: [ my-ident ] min(24px) [ my-ident ];"), v("[ my-ident ] min(24px) [ tag-a ]", "grid-template-columns: [ my-ident ] min(24px) [ tag-a ];"), v("[ my-ident ] min(24px)", "grid-template-columns: [ my-ident ] min(24px);"), v("[ my-ident ] max(24px) [ my-ident ]", "grid-template-columns: [ my-ident ] max(24px) [ my-ident ];"), v("[ my-ident ] max(24px) [ tag-a ]", "grid-template-columns: [ my-ident ] max(24px) [ tag-a ];"), v("[ my-ident ] max(24px)", "grid-template-columns: [ my-ident ] max(24px);"), v("[ my-ident ] round(nearest, 24px, 2em) [ my-ident ]", "grid-template-columns: [ my-ident ] round(nearest, 24px, 2em) [ my-ident ];"), v("[ my-ident ] round(nearest, 24px, 2em) [ tag-a ]", "grid-template-columns: [ my-ident ] round(nearest, 24px, 2em) [ tag-a ];"), v("[ my-ident ] round(nearest, 24px, 2em)", "grid-template-columns: [ my-ident ] round(nearest, 24px, 2em);"), v("[ my-ident ] abs(24px) [ my-ident ]", "grid-template-columns: [ my-ident ] abs(24px) [ my-ident ];"), ], }, { number: 60, name: "grid-template-rows", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003egrid-template-rows\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the line names and track sizing functions of the \u003ca href=\"/en-US/docs/Glossary/Grid_Row\"\u003egrid rows\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | TrackListType | AutoTrackListType | \"subgrid\" , [ LineNameListType ]", ebnf: "grid-template-rows =\n \"none\" | TrackListType | AutoTrackListType | \"subgrid\" , [ LineNameListType ]", valueType: "length", defaultValue: "[ my-ident ] 24px [ my-ident ]", related: [], provenance: "assisted", truncated: true, trueCount: 183, shown: 50, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003cflex [0,∞]\u003e", samples: ["1fr", "2fr"] }, { type: "\u003cinteger\u003e", samples: ["2", "1", "3", "5", "4"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("none", "grid-template-rows: none;"), v("[ my-ident ] 24px [ my-ident ]", "grid-template-rows: [ my-ident ] 24px [ my-ident ];"), v("[ my-ident ] 24px [ tag-a ]", "grid-template-rows: [ my-ident ] 24px [ tag-a ];"), v("[ my-ident ] 24px", "grid-template-rows: [ my-ident ] 24px;"), v("[ my-ident ] 48px [ my-ident ]", "grid-template-rows: [ my-ident ] 48px [ my-ident ];"), v("[ my-ident ] 48px [ tag-a ]", "grid-template-rows: [ my-ident ] 48px [ tag-a ];"), v("[ my-ident ] 48px", "grid-template-rows: [ my-ident ] 48px;"), v("[ my-ident ] 8px [ my-ident ]", "grid-template-rows: [ my-ident ] 8px [ my-ident ];"), v("[ my-ident ] 8px [ tag-a ]", "grid-template-rows: [ my-ident ] 8px [ tag-a ];"), v("[ my-ident ] 8px", "grid-template-rows: [ my-ident ] 8px;"), v("[ my-ident ] 16px [ my-ident ]", "grid-template-rows: [ my-ident ] 16px [ my-ident ];"), v("[ my-ident ] 16px [ tag-a ]", "grid-template-rows: [ my-ident ] 16px [ tag-a ];"), v("[ my-ident ] 16px", "grid-template-rows: [ my-ident ] 16px;"), v("[ my-ident ] 64px [ my-ident ]", "grid-template-rows: [ my-ident ] 64px [ my-ident ];"), v("[ my-ident ] 64px [ tag-a ]", "grid-template-rows: [ my-ident ] 64px [ tag-a ];"), v("[ my-ident ] 64px", "grid-template-rows: [ my-ident ] 64px;"), v("[ my-ident ] 50% [ my-ident ]", "grid-template-rows: [ my-ident ] 50% [ my-ident ];"), v("[ my-ident ] 50% [ tag-a ]", "grid-template-rows: [ my-ident ] 50% [ tag-a ];"), v("[ my-ident ] 50%", "grid-template-rows: [ my-ident ] 50%;"), v("[ my-ident ] 80% [ my-ident ]", "grid-template-rows: [ my-ident ] 80% [ my-ident ];"), v("[ my-ident ] 80% [ tag-a ]", "grid-template-rows: [ my-ident ] 80% [ tag-a ];"), v("[ my-ident ] 80%", "grid-template-rows: [ my-ident ] 80%;"), v("[ my-ident ] 30% [ my-ident ]", "grid-template-rows: [ my-ident ] 30% [ my-ident ];"), v("[ my-ident ] 30% [ tag-a ]", "grid-template-rows: [ my-ident ] 30% [ tag-a ];"), v("[ my-ident ] 30%", "grid-template-rows: [ my-ident ] 30%;"), v("[ my-ident ] 65% [ my-ident ]", "grid-template-rows: [ my-ident ] 65% [ my-ident ];"), v("[ my-ident ] 65% [ tag-a ]", "grid-template-rows: [ my-ident ] 65% [ tag-a ];"), v("[ my-ident ] 65%", "grid-template-rows: [ my-ident ] 65%;"), v("[ my-ident ] 15% [ my-ident ]", "grid-template-rows: [ my-ident ] 15% [ my-ident ];"), v("[ my-ident ] 15% [ tag-a ]", "grid-template-rows: [ my-ident ] 15% [ tag-a ];"), v("[ my-ident ] 15%", "grid-template-rows: [ my-ident ] 15%;"), v("[ my-ident ] 100% [ my-ident ]", "grid-template-rows: [ my-ident ] 100% [ my-ident ];"), v("[ my-ident ] 100% [ tag-a ]", "grid-template-rows: [ my-ident ] 100% [ tag-a ];"), v("[ my-ident ] 100%", "grid-template-rows: [ my-ident ] 100%;"), v("[ my-ident ] calc(24px) [ my-ident ]", "grid-template-rows: [ my-ident ] calc(24px) [ my-ident ];"), v("[ my-ident ] calc(24px) [ tag-a ]", "grid-template-rows: [ my-ident ] calc(24px) [ tag-a ];"), v("[ my-ident ] calc(24px)", "grid-template-rows: [ my-ident ] calc(24px);"), v("[ my-ident ] clamp(24px, 2em, 48px) [ my-ident ]", "grid-template-rows: [ my-ident ] clamp(24px, 2em, 48px) [ my-ident ];"), v("[ my-ident ] clamp(24px, 2em, 48px) [ tag-a ]", "grid-template-rows: [ my-ident ] clamp(24px, 2em, 48px) [ tag-a ];"), v("[ my-ident ] clamp(24px, 2em, 48px)", "grid-template-rows: [ my-ident ] clamp(24px, 2em, 48px);"), v("[ my-ident ] min(24px) [ my-ident ]", "grid-template-rows: [ my-ident ] min(24px) [ my-ident ];"), v("[ my-ident ] min(24px) [ tag-a ]", "grid-template-rows: [ my-ident ] min(24px) [ tag-a ];"), v("[ my-ident ] min(24px)", "grid-template-rows: [ my-ident ] min(24px);"), v("[ my-ident ] max(24px) [ my-ident ]", "grid-template-rows: [ my-ident ] max(24px) [ my-ident ];"), v("[ my-ident ] max(24px) [ tag-a ]", "grid-template-rows: [ my-ident ] max(24px) [ tag-a ];"), v("[ my-ident ] max(24px)", "grid-template-rows: [ my-ident ] max(24px);"), v("[ my-ident ] round(nearest, 24px, 2em) [ my-ident ]", "grid-template-rows: [ my-ident ] round(nearest, 24px, 2em) [ my-ident ];"), v("[ my-ident ] round(nearest, 24px, 2em) [ tag-a ]", "grid-template-rows: [ my-ident ] round(nearest, 24px, 2em) [ tag-a ];"), v("[ my-ident ] round(nearest, 24px, 2em)", "grid-template-rows: [ my-ident ] round(nearest, 24px, 2em);"), v("[ my-ident ] abs(24px) [ my-ident ]", "grid-template-rows: [ my-ident ] abs(24px) [ my-ident ];"), ], }, ], }, { id: "margin", sigil: "05", title: "Spacing: Margin", blurb: "Outer space that pushes neighbours away (physical and logical).", demo: "generic", sampleKind: "box", group: "families", focus: false, gallery: false, count: 12, properties: [ { number: 61, name: "margin", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emargin\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e shorthand property sets the \u003ca href=\"/en-US/docs/Web/CSS/Guides/Box_model/Introduction#margin_area\"\u003emargin area\u003c/a\u003e on all four sides of an element.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "MarginTopProp , [ MarginTopProp ] , [ MarginTopProp ] , [ MarginTopProp ]", ebnf: "margin =\n MarginTopProp , [ MarginTopProp ] , [ MarginTopProp ] , [ MarginTopProp ]", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 21, shown: 21, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "margin: 24px;"), v("48px", "margin: 48px;"), v("8px", "margin: 8px;"), v("16px", "margin: 16px;"), v("64px", "margin: 64px;"), v("50%", "margin: 50%;"), v("80%", "margin: 80%;"), v("30%", "margin: 30%;"), v("65%", "margin: 65%;"), v("15%", "margin: 15%;"), v("100%", "margin: 100%;"), v("calc(24px)", "margin: calc(24px);"), v("clamp(24px, 2em, 48px)", "margin: clamp(24px, 2em, 48px);"), v("min(24px)", "margin: min(24px);"), v("max(24px)", "margin: max(24px);"), v("round(nearest, 24px, 2em)", "margin: round(nearest, 24px, 2em);"), v("abs(24px)", "margin: abs(24px);"), v("var(--my-var, 48px)", "margin: var(--my-var, 48px);"), v("env(my-ident, 48px)", "margin: env(my-ident, 48px);"), v("auto", "margin: auto;"), v("anchor-size(--my-var width, 48px)", "margin: anchor-size(--my-var width, 48px);"), ], }, { number: 62, name: "margin-block", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emargin-block\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "MarginTopProp , [ MarginTopProp ]", ebnf: "margin-block =\n MarginTopProp , [ MarginTopProp ]", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 21, shown: 21, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "margin-block: 24px;"), v("48px", "margin-block: 48px;"), v("8px", "margin-block: 8px;"), v("16px", "margin-block: 16px;"), v("64px", "margin-block: 64px;"), v("50%", "margin-block: 50%;"), v("80%", "margin-block: 80%;"), v("30%", "margin-block: 30%;"), v("65%", "margin-block: 65%;"), v("15%", "margin-block: 15%;"), v("100%", "margin-block: 100%;"), v("calc(24px)", "margin-block: calc(24px);"), v("clamp(24px, 2em, 48px)", "margin-block: clamp(24px, 2em, 48px);"), v("min(24px)", "margin-block: min(24px);"), v("max(24px)", "margin-block: max(24px);"), v("round(nearest, 24px, 2em)", "margin-block: round(nearest, 24px, 2em);"), v("abs(24px)", "margin-block: abs(24px);"), v("var(--my-var, 48px)", "margin-block: var(--my-var, 48px);"), v("env(my-ident, 48px)", "margin-block: env(my-ident, 48px);"), v("auto", "margin-block: auto;"), v("anchor-size(--my-var width, 48px)", "margin-block: anchor-size(--my-var width, 48px);"), ], }, { number: 63, name: "margin-block-end", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emargin-block-end\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the logical block end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "MarginTopProp", ebnf: "margin-block-end =\n MarginTopProp", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 21, shown: 21, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "margin-block-end: 24px;"), v("48px", "margin-block-end: 48px;"), v("8px", "margin-block-end: 8px;"), v("16px", "margin-block-end: 16px;"), v("64px", "margin-block-end: 64px;"), v("50%", "margin-block-end: 50%;"), v("80%", "margin-block-end: 80%;"), v("30%", "margin-block-end: 30%;"), v("65%", "margin-block-end: 65%;"), v("15%", "margin-block-end: 15%;"), v("100%", "margin-block-end: 100%;"), v("calc(24px)", "margin-block-end: calc(24px);"), v("clamp(24px, 2em, 48px)", "margin-block-end: clamp(24px, 2em, 48px);"), v("min(24px)", "margin-block-end: min(24px);"), v("max(24px)", "margin-block-end: max(24px);"), v("round(nearest, 24px, 2em)", "margin-block-end: round(nearest, 24px, 2em);"), v("abs(24px)", "margin-block-end: abs(24px);"), v("var(--my-var, 48px)", "margin-block-end: var(--my-var, 48px);"), v("env(my-ident, 48px)", "margin-block-end: env(my-ident, 48px);"), v("auto", "margin-block-end: auto;"), v("anchor-size(--my-var width, 48px)", "margin-block-end: anchor-size(--my-var width, 48px);"), ], }, { number: 64, name: "margin-block-start", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emargin-block-start\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the logical block start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "MarginTopProp", ebnf: "margin-block-start =\n MarginTopProp", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 21, shown: 21, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "margin-block-start: 24px;"), v("48px", "margin-block-start: 48px;"), v("8px", "margin-block-start: 8px;"), v("16px", "margin-block-start: 16px;"), v("64px", "margin-block-start: 64px;"), v("50%", "margin-block-start: 50%;"), v("80%", "margin-block-start: 80%;"), v("30%", "margin-block-start: 30%;"), v("65%", "margin-block-start: 65%;"), v("15%", "margin-block-start: 15%;"), v("100%", "margin-block-start: 100%;"), v("calc(24px)", "margin-block-start: calc(24px);"), v("clamp(24px, 2em, 48px)", "margin-block-start: clamp(24px, 2em, 48px);"), v("min(24px)", "margin-block-start: min(24px);"), v("max(24px)", "margin-block-start: max(24px);"), v("round(nearest, 24px, 2em)", "margin-block-start: round(nearest, 24px, 2em);"), v("abs(24px)", "margin-block-start: abs(24px);"), v("var(--my-var, 48px)", "margin-block-start: var(--my-var, 48px);"), v("env(my-ident, 48px)", "margin-block-start: env(my-ident, 48px);"), v("auto", "margin-block-start: auto;"), v("anchor-size(--my-var width, 48px)", "margin-block-start: anchor-size(--my-var width, 48px);"), ], }, { number: 65, name: "margin-bottom", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emargin-bottom\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the \u003ca href=\"/en-US/docs/Web/CSS/Guides/Box_model/Introduction#margin_area\"\u003emargin area\u003c/a\u003e on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LengthPercentageType | \"auto\" | AnchorSizeFn", ebnf: "margin-bottom =\n LengthPercentageType | \"auto\" | AnchorSizeFn", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 21, shown: 21, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "margin-bottom: 24px;"), v("48px", "margin-bottom: 48px;"), v("8px", "margin-bottom: 8px;"), v("16px", "margin-bottom: 16px;"), v("64px", "margin-bottom: 64px;"), v("50%", "margin-bottom: 50%;"), v("80%", "margin-bottom: 80%;"), v("30%", "margin-bottom: 30%;"), v("65%", "margin-bottom: 65%;"), v("15%", "margin-bottom: 15%;"), v("100%", "margin-bottom: 100%;"), v("calc(24px)", "margin-bottom: calc(24px);"), v("clamp(24px, 2em, 48px)", "margin-bottom: clamp(24px, 2em, 48px);"), v("min(24px)", "margin-bottom: min(24px);"), v("max(24px)", "margin-bottom: max(24px);"), v("round(nearest, 24px, 2em)", "margin-bottom: round(nearest, 24px, 2em);"), v("abs(24px)", "margin-bottom: abs(24px);"), v("var(--my-var, 48px)", "margin-bottom: var(--my-var, 48px);"), v("env(my-ident, 48px)", "margin-bottom: env(my-ident, 48px);"), v("auto", "margin-bottom: auto;"), v("anchor-size(--my-var width, 48px)", "margin-bottom: anchor-size(--my-var width, 48px);"), ], }, { number: 66, name: "margin-inline", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emargin-inline\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "MarginTopProp , [ MarginTopProp ]", ebnf: "margin-inline =\n MarginTopProp , [ MarginTopProp ]", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 21, shown: 21, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "margin-inline: 24px;"), v("48px", "margin-inline: 48px;"), v("8px", "margin-inline: 8px;"), v("16px", "margin-inline: 16px;"), v("64px", "margin-inline: 64px;"), v("50%", "margin-inline: 50%;"), v("80%", "margin-inline: 80%;"), v("30%", "margin-inline: 30%;"), v("65%", "margin-inline: 65%;"), v("15%", "margin-inline: 15%;"), v("100%", "margin-inline: 100%;"), v("calc(24px)", "margin-inline: calc(24px);"), v("clamp(24px, 2em, 48px)", "margin-inline: clamp(24px, 2em, 48px);"), v("min(24px)", "margin-inline: min(24px);"), v("max(24px)", "margin-inline: max(24px);"), v("round(nearest, 24px, 2em)", "margin-inline: round(nearest, 24px, 2em);"), v("abs(24px)", "margin-inline: abs(24px);"), v("var(--my-var, 48px)", "margin-inline: var(--my-var, 48px);"), v("env(my-ident, 48px)", "margin-inline: env(my-ident, 48px);"), v("auto", "margin-inline: auto;"), v("anchor-size(--my-var width, 48px)", "margin-inline: anchor-size(--my-var width, 48px);"), ], }, { number: 67, name: "margin-inline-end", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emargin-inline-end\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the logical inline end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. In other words, it corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/margin-top\"\u003e\u003ccode\u003emargin-top\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/margin-right\"\u003e\u003ccode\u003emargin-right\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/margin-bottom\"\u003e\u003ccode\u003emargin-bottom\u003c/code\u003e\u003c/a\u003e or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/margin-left\"\u003e\u003ccode\u003emargin-left\u003c/code\u003e\u003c/a\u003e property depending on the values defined for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "MarginTopProp", ebnf: "margin-inline-end =\n MarginTopProp", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 21, shown: 21, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "margin-inline-end: 24px;"), v("48px", "margin-inline-end: 48px;"), v("8px", "margin-inline-end: 8px;"), v("16px", "margin-inline-end: 16px;"), v("64px", "margin-inline-end: 64px;"), v("50%", "margin-inline-end: 50%;"), v("80%", "margin-inline-end: 80%;"), v("30%", "margin-inline-end: 30%;"), v("65%", "margin-inline-end: 65%;"), v("15%", "margin-inline-end: 15%;"), v("100%", "margin-inline-end: 100%;"), v("calc(24px)", "margin-inline-end: calc(24px);"), v("clamp(24px, 2em, 48px)", "margin-inline-end: clamp(24px, 2em, 48px);"), v("min(24px)", "margin-inline-end: min(24px);"), v("max(24px)", "margin-inline-end: max(24px);"), v("round(nearest, 24px, 2em)", "margin-inline-end: round(nearest, 24px, 2em);"), v("abs(24px)", "margin-inline-end: abs(24px);"), v("var(--my-var, 48px)", "margin-inline-end: var(--my-var, 48px);"), v("env(my-ident, 48px)", "margin-inline-end: env(my-ident, 48px);"), v("auto", "margin-inline-end: auto;"), v("anchor-size(--my-var width, 48px)", "margin-inline-end: anchor-size(--my-var width, 48px);"), ], }, { number: 68, name: "margin-inline-start", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emargin-inline-start\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the logical inline start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. It corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/margin-top\"\u003e\u003ccode\u003emargin-top\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/margin-right\"\u003e\u003ccode\u003emargin-right\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/margin-bottom\"\u003e\u003ccode\u003emargin-bottom\u003c/code\u003e\u003c/a\u003e, or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/margin-left\"\u003e\u003ccode\u003emargin-left\u003c/code\u003e\u003c/a\u003e property depending on the values defined for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "MarginTopProp", ebnf: "margin-inline-start =\n MarginTopProp", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 21, shown: 21, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "margin-inline-start: 24px;"), v("48px", "margin-inline-start: 48px;"), v("8px", "margin-inline-start: 8px;"), v("16px", "margin-inline-start: 16px;"), v("64px", "margin-inline-start: 64px;"), v("50%", "margin-inline-start: 50%;"), v("80%", "margin-inline-start: 80%;"), v("30%", "margin-inline-start: 30%;"), v("65%", "margin-inline-start: 65%;"), v("15%", "margin-inline-start: 15%;"), v("100%", "margin-inline-start: 100%;"), v("calc(24px)", "margin-inline-start: calc(24px);"), v("clamp(24px, 2em, 48px)", "margin-inline-start: clamp(24px, 2em, 48px);"), v("min(24px)", "margin-inline-start: min(24px);"), v("max(24px)", "margin-inline-start: max(24px);"), v("round(nearest, 24px, 2em)", "margin-inline-start: round(nearest, 24px, 2em);"), v("abs(24px)", "margin-inline-start: abs(24px);"), v("var(--my-var, 48px)", "margin-inline-start: var(--my-var, 48px);"), v("env(my-ident, 48px)", "margin-inline-start: env(my-ident, 48px);"), v("auto", "margin-inline-start: auto;"), v("anchor-size(--my-var width, 48px)", "margin-inline-start: anchor-size(--my-var width, 48px);"), ], }, { number: 69, name: "margin-left", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emargin-left\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the \u003ca href=\"/en-US/docs/Web/CSS/Guides/Box_model/Introduction#margin_area\"\u003emargin area\u003c/a\u003e on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LengthPercentageType | \"auto\" | AnchorSizeFn", ebnf: "margin-left =\n LengthPercentageType | \"auto\" | AnchorSizeFn", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 21, shown: 21, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "margin-left: 24px;"), v("48px", "margin-left: 48px;"), v("8px", "margin-left: 8px;"), v("16px", "margin-left: 16px;"), v("64px", "margin-left: 64px;"), v("50%", "margin-left: 50%;"), v("80%", "margin-left: 80%;"), v("30%", "margin-left: 30%;"), v("65%", "margin-left: 65%;"), v("15%", "margin-left: 15%;"), v("100%", "margin-left: 100%;"), v("calc(24px)", "margin-left: calc(24px);"), v("clamp(24px, 2em, 48px)", "margin-left: clamp(24px, 2em, 48px);"), v("min(24px)", "margin-left: min(24px);"), v("max(24px)", "margin-left: max(24px);"), v("round(nearest, 24px, 2em)", "margin-left: round(nearest, 24px, 2em);"), v("abs(24px)", "margin-left: abs(24px);"), v("var(--my-var, 48px)", "margin-left: var(--my-var, 48px);"), v("env(my-ident, 48px)", "margin-left: env(my-ident, 48px);"), v("auto", "margin-left: auto;"), v("anchor-size(--my-var width, 48px)", "margin-left: anchor-size(--my-var width, 48px);"), ], }, { number: 70, name: "margin-right", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emargin-right\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the \u003ca href=\"/en-US/docs/Web/CSS/Guides/Box_model/Introduction#margin_area\"\u003emargin area\u003c/a\u003e on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LengthPercentageType | \"auto\" | AnchorSizeFn", ebnf: "margin-right =\n LengthPercentageType | \"auto\" | AnchorSizeFn", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 21, shown: 21, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "margin-right: 24px;"), v("48px", "margin-right: 48px;"), v("8px", "margin-right: 8px;"), v("16px", "margin-right: 16px;"), v("64px", "margin-right: 64px;"), v("50%", "margin-right: 50%;"), v("80%", "margin-right: 80%;"), v("30%", "margin-right: 30%;"), v("65%", "margin-right: 65%;"), v("15%", "margin-right: 15%;"), v("100%", "margin-right: 100%;"), v("calc(24px)", "margin-right: calc(24px);"), v("clamp(24px, 2em, 48px)", "margin-right: clamp(24px, 2em, 48px);"), v("min(24px)", "margin-right: min(24px);"), v("max(24px)", "margin-right: max(24px);"), v("round(nearest, 24px, 2em)", "margin-right: round(nearest, 24px, 2em);"), v("abs(24px)", "margin-right: abs(24px);"), v("var(--my-var, 48px)", "margin-right: var(--my-var, 48px);"), v("env(my-ident, 48px)", "margin-right: env(my-ident, 48px);"), v("auto", "margin-right: auto;"), v("anchor-size(--my-var width, 48px)", "margin-right: anchor-size(--my-var width, 48px);"), ], }, { number: 71, name: "margin-top", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emargin-top\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the \u003ca href=\"/en-US/docs/Web/CSS/Guides/Box_model/Introduction#margin_area\"\u003emargin area\u003c/a\u003e on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LengthPercentageType | \"auto\" | AnchorSizeFn", ebnf: "margin-top =\n LengthPercentageType | \"auto\" | AnchorSizeFn", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 21, shown: 21, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "margin-top: 24px;"), v("48px", "margin-top: 48px;"), v("8px", "margin-top: 8px;"), v("16px", "margin-top: 16px;"), v("64px", "margin-top: 64px;"), v("50%", "margin-top: 50%;"), v("80%", "margin-top: 80%;"), v("30%", "margin-top: 30%;"), v("65%", "margin-top: 65%;"), v("15%", "margin-top: 15%;"), v("100%", "margin-top: 100%;"), v("calc(24px)", "margin-top: calc(24px);"), v("clamp(24px, 2em, 48px)", "margin-top: clamp(24px, 2em, 48px);"), v("min(24px)", "margin-top: min(24px);"), v("max(24px)", "margin-top: max(24px);"), v("round(nearest, 24px, 2em)", "margin-top: round(nearest, 24px, 2em);"), v("abs(24px)", "margin-top: abs(24px);"), v("var(--my-var, 48px)", "margin-top: var(--my-var, 48px);"), v("env(my-ident, 48px)", "margin-top: env(my-ident, 48px);"), v("auto", "margin-top: auto;"), v("anchor-size(--my-var width, 48px)", "margin-top: anchor-size(--my-var width, 48px);"), ], }, { number: 72, name: "margin-trim", maturity: "modern", description: "The \u003ccode\u003emargin-trim\u003c/code\u003e property allows the container to trim the margins of its children where they adjoin the container's edges.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\"\n | \"block\" , [ \"inline\" ] | \"inline\" , [ \"block\" ]\n | \"block-start\" , [ \"inline-start\" , [ \"block-end\" , [ \"inline-end\" ] | \"inline-end\" , [ \"block-end\" ] ] | \"block-end\" , [ \"inline-start\" , [ \"inline-end\" ] | \"inline-end\" , [ \"inline-start\" ] ] | \"inline-end\" , [ \"inline-start\" , [ \"block-end\" ] | \"block-end\" , [ \"inline-start\" ] ] ]\n | \"inline-start\" , [ \"block-start\" , [ \"block-end\" , [ \"inline-end\" ] | \"inline-end\" , [ \"block-end\" ] ] | \"block-end\" , [ \"block-start\" , [ \"inline-end\" ] | \"inline-end\" , [ \"block-start\" ] ] | \"inline-end\" , [ \"block-start\" , [ \"block-end\" ] | \"block-end\" , [ \"block-start\" ] ] ]\n | \"block-end\" , [ \"block-start\" , [ \"inline-start\" , [ \"inline-end\" ] | \"inline-end\" , [ \"inline-start\" ] ] | \"inline-start\" , [ \"block-start\" , [ \"inline-end\" ] | \"inline-end\" , [ \"block-start\" ] ] | \"inline-end\" , [ \"block-start\" , [ \"inline-start\" ] | \"inline-start\" , [ \"block-start\" ] ] ]\n | \"inline-end\" , [ \"block-start\" , [ \"inline-start\" , [ \"block-end\" ] | \"block-end\" , [ \"inline-start\" ] ] | \"inline-start\" , [ \"block-start\" , [ \"block-end\" ] | \"block-end\" , [ \"block-start\" ] ] | \"block-end\" , [ \"block-start\" , [ \"inline-start\" ] | \"inline-start\" , [ \"block-start\" ] ] ]", ebnf: "margin-trim =\n \"none\"\n | \"block\" , [ \"inline\" ] | \"inline\" , [ \"block\" ]\n | \"block-start\" , [ \"inline-start\" , [ \"block-end\" , [ \"inline-end\" ] | \"inline-end\" , [ \"block-end\" ] ] | \"block-end\" , [ \"inline-start\" , [ \"inline-end\" ] | \"inline-end\" , [ \"inline-start\" ] ] | \"inline-end\" , [ \"inline-start\" , [ \"block-end\" ] | \"block-end\" , [ \"inline-start\" ] ] ]\n | \"inline-start\" , [ \"block-start\" , [ \"block-end\" , [ \"inline-end\" ] | \"inline-end\" , [ \"block-end\" ] ] | \"block-end\" , [ \"block-start\" , [ \"inline-end\" ] | \"inline-end\" , [ \"block-start\" ] ] | \"inline-end\" , [ \"block-start\" , [ \"block-end\" ] | \"block-end\" , [ \"block-start\" ] ] ]\n | \"block-end\" , [ \"block-start\" , [ \"inline-start\" , [ \"inline-end\" ] | \"inline-end\" , [ \"inline-start\" ] ] | \"inline-start\" , [ \"block-start\" , [ \"inline-end\" ] | \"inline-end\" , [ \"block-start\" ] ] | \"inline-end\" , [ \"block-start\" , [ \"inline-start\" ] | \"inline-start\" , [ \"block-start\" ] ] ]\n | \"inline-end\" , [ \"block-start\" , [ \"inline-start\" , [ \"block-end\" ] | \"block-end\" , [ \"inline-start\" ] ] | \"inline-start\" , [ \"block-start\" , [ \"block-end\" ] | \"block-end\" , [ \"block-start\" ] ] | \"block-end\" , [ \"block-start\" , [ \"inline-start\" ] | \"inline-start\" , [ \"block-start\" ] ] ]", valueType: "keyword", defaultValue: "block inline", related: [], provenance: "pure", truncated: false, trueCount: 69, shown: 50, assists: [], values: [ v("none", "margin-trim: none;"), v("block inline", "margin-trim: block inline;"), v("block", "margin-trim: block;"), v("inline block", "margin-trim: inline block;"), v("inline", "margin-trim: inline;"), v("block-start inline-start block-end inline-end", "margin-trim: block-start inline-start block-end inline-end;"), v("block-start inline-start block-end", "margin-trim: block-start inline-start block-end;"), v("block-start inline-start inline-end block-end", "margin-trim: block-start inline-start inline-end block-end;"), v("block-start inline-start inline-end", "margin-trim: block-start inline-start inline-end;"), v("block-start inline-start", "margin-trim: block-start inline-start;"), v("block-start block-end inline-start inline-end", "margin-trim: block-start block-end inline-start inline-end;"), v("block-start block-end inline-start", "margin-trim: block-start block-end inline-start;"), v("block-start block-end inline-end inline-start", "margin-trim: block-start block-end inline-end inline-start;"), v("block-start block-end inline-end", "margin-trim: block-start block-end inline-end;"), v("block-start block-end", "margin-trim: block-start block-end;"), v("block-start inline-end inline-start block-end", "margin-trim: block-start inline-end inline-start block-end;"), v("block-start inline-end inline-start", "margin-trim: block-start inline-end inline-start;"), v("block-start inline-end block-end inline-start", "margin-trim: block-start inline-end block-end inline-start;"), v("block-start inline-end block-end", "margin-trim: block-start inline-end block-end;"), v("block-start inline-end", "margin-trim: block-start inline-end;"), v("block-start", "margin-trim: block-start;"), v("inline-start block-start block-end inline-end", "margin-trim: inline-start block-start block-end inline-end;"), v("inline-start block-start block-end", "margin-trim: inline-start block-start block-end;"), v("inline-start block-start inline-end block-end", "margin-trim: inline-start block-start inline-end block-end;"), v("inline-start block-start inline-end", "margin-trim: inline-start block-start inline-end;"), v("inline-start block-start", "margin-trim: inline-start block-start;"), v("inline-start block-end block-start inline-end", "margin-trim: inline-start block-end block-start inline-end;"), v("inline-start block-end block-start", "margin-trim: inline-start block-end block-start;"), v("inline-start block-end inline-end block-start", "margin-trim: inline-start block-end inline-end block-start;"), v("inline-start block-end inline-end", "margin-trim: inline-start block-end inline-end;"), v("inline-start block-end", "margin-trim: inline-start block-end;"), v("inline-start inline-end block-start block-end", "margin-trim: inline-start inline-end block-start block-end;"), v("inline-start inline-end block-start", "margin-trim: inline-start inline-end block-start;"), v("inline-start inline-end block-end block-start", "margin-trim: inline-start inline-end block-end block-start;"), v("inline-start inline-end block-end", "margin-trim: inline-start inline-end block-end;"), v("inline-start inline-end", "margin-trim: inline-start inline-end;"), v("inline-start", "margin-trim: inline-start;"), v("block-end block-start inline-start inline-end", "margin-trim: block-end block-start inline-start inline-end;"), v("block-end block-start inline-start", "margin-trim: block-end block-start inline-start;"), v("block-end block-start inline-end inline-start", "margin-trim: block-end block-start inline-end inline-start;"), v("block-end block-start inline-end", "margin-trim: block-end block-start inline-end;"), v("block-end block-start", "margin-trim: block-end block-start;"), v("block-end inline-start block-start inline-end", "margin-trim: block-end inline-start block-start inline-end;"), v("block-end inline-start block-start", "margin-trim: block-end inline-start block-start;"), v("block-end inline-start inline-end block-start", "margin-trim: block-end inline-start inline-end block-start;"), v("block-end inline-start inline-end", "margin-trim: block-end inline-start inline-end;"), v("block-end inline-start", "margin-trim: block-end inline-start;"), v("block-end inline-end block-start inline-start", "margin-trim: block-end inline-end block-start inline-start;"), v("block-end inline-end block-start", "margin-trim: block-end inline-end block-start;"), v("block-end inline-end inline-start block-start", "margin-trim: block-end inline-end inline-start block-start;"), ], }, ], }, { id: "padding", sigil: "06", title: "Spacing: Padding", blurb: "Inner space between the content box and the border.", demo: "generic", sampleKind: "box", group: "families", focus: false, gallery: false, count: 11, properties: [ { number: 73, name: "padding", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003epadding\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e sets the \u003ca href=\"/en-US/docs/Web/CSS/Guides/Box_model/Introduction#padding_area\"\u003epadding area\u003c/a\u003e on all four sides of an element at once.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "PaddingTopProp , [ PaddingTopProp ] , [ PaddingTopProp ] , [ PaddingTopProp ]", ebnf: "padding =\n PaddingTopProp , [ PaddingTopProp ] , [ PaddingTopProp ] , [ PaddingTopProp ]", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 18, shown: 18, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "padding: 24px;"), v("48px", "padding: 48px;"), v("8px", "padding: 8px;"), v("16px", "padding: 16px;"), v("64px", "padding: 64px;"), v("50%", "padding: 50%;"), v("80%", "padding: 80%;"), v("30%", "padding: 30%;"), v("65%", "padding: 65%;"), v("15%", "padding: 15%;"), v("100%", "padding: 100%;"), v("calc(24px)", "padding: calc(24px);"), v("clamp(24px, 2em, 48px)", "padding: clamp(24px, 2em, 48px);"), v("min(24px)", "padding: min(24px);"), v("max(24px)", "padding: max(24px);"), v("round(nearest, 24px, 2em)", "padding: round(nearest, 24px, 2em);"), v("abs(24px)", "padding: abs(24px);"), v("env(my-ident, 48px)", "padding: env(my-ident, 48px);"), ], }, { number: 74, name: "padding-block", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003epadding-block\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "PaddingTopProp , [ PaddingTopProp ]", ebnf: "padding-block =\n PaddingTopProp , [ PaddingTopProp ]", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 18, shown: 18, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "padding-block: 24px;"), v("48px", "padding-block: 48px;"), v("8px", "padding-block: 8px;"), v("16px", "padding-block: 16px;"), v("64px", "padding-block: 64px;"), v("50%", "padding-block: 50%;"), v("80%", "padding-block: 80%;"), v("30%", "padding-block: 30%;"), v("65%", "padding-block: 65%;"), v("15%", "padding-block: 15%;"), v("100%", "padding-block: 100%;"), v("calc(24px)", "padding-block: calc(24px);"), v("clamp(24px, 2em, 48px)", "padding-block: clamp(24px, 2em, 48px);"), v("min(24px)", "padding-block: min(24px);"), v("max(24px)", "padding-block: max(24px);"), v("round(nearest, 24px, 2em)", "padding-block: round(nearest, 24px, 2em);"), v("abs(24px)", "padding-block: abs(24px);"), v("env(my-ident, 48px)", "padding-block: env(my-ident, 48px);"), ], }, { number: 75, name: "padding-block-end", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003epadding-block-end\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the logical block end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "PaddingTopProp", ebnf: "padding-block-end =\n PaddingTopProp", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 18, shown: 18, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "padding-block-end: 24px;"), v("48px", "padding-block-end: 48px;"), v("8px", "padding-block-end: 8px;"), v("16px", "padding-block-end: 16px;"), v("64px", "padding-block-end: 64px;"), v("50%", "padding-block-end: 50%;"), v("80%", "padding-block-end: 80%;"), v("30%", "padding-block-end: 30%;"), v("65%", "padding-block-end: 65%;"), v("15%", "padding-block-end: 15%;"), v("100%", "padding-block-end: 100%;"), v("calc(24px)", "padding-block-end: calc(24px);"), v("clamp(24px, 2em, 48px)", "padding-block-end: clamp(24px, 2em, 48px);"), v("min(24px)", "padding-block-end: min(24px);"), v("max(24px)", "padding-block-end: max(24px);"), v("round(nearest, 24px, 2em)", "padding-block-end: round(nearest, 24px, 2em);"), v("abs(24px)", "padding-block-end: abs(24px);"), v("env(my-ident, 48px)", "padding-block-end: env(my-ident, 48px);"), ], }, { number: 76, name: "padding-block-start", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003epadding-block-start\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the logical block start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "PaddingTopProp", ebnf: "padding-block-start =\n PaddingTopProp", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 18, shown: 18, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "padding-block-start: 24px;"), v("48px", "padding-block-start: 48px;"), v("8px", "padding-block-start: 8px;"), v("16px", "padding-block-start: 16px;"), v("64px", "padding-block-start: 64px;"), v("50%", "padding-block-start: 50%;"), v("80%", "padding-block-start: 80%;"), v("30%", "padding-block-start: 30%;"), v("65%", "padding-block-start: 65%;"), v("15%", "padding-block-start: 15%;"), v("100%", "padding-block-start: 100%;"), v("calc(24px)", "padding-block-start: calc(24px);"), v("clamp(24px, 2em, 48px)", "padding-block-start: clamp(24px, 2em, 48px);"), v("min(24px)", "padding-block-start: min(24px);"), v("max(24px)", "padding-block-start: max(24px);"), v("round(nearest, 24px, 2em)", "padding-block-start: round(nearest, 24px, 2em);"), v("abs(24px)", "padding-block-start: abs(24px);"), v("env(my-ident, 48px)", "padding-block-start: env(my-ident, 48px);"), ], }, { number: 77, name: "padding-bottom", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003epadding-bottom\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the height of the \u003ca href=\"/en-US/docs/Web/CSS/Guides/Box_model/Introduction#padding_area\"\u003epadding area\u003c/a\u003e on the bottom of an element.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "NonNegativeLengthPercentageType", ebnf: "padding-bottom =\n NonNegativeLengthPercentageType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 18, shown: 18, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "padding-bottom: 24px;"), v("48px", "padding-bottom: 48px;"), v("8px", "padding-bottom: 8px;"), v("16px", "padding-bottom: 16px;"), v("64px", "padding-bottom: 64px;"), v("50%", "padding-bottom: 50%;"), v("80%", "padding-bottom: 80%;"), v("30%", "padding-bottom: 30%;"), v("65%", "padding-bottom: 65%;"), v("15%", "padding-bottom: 15%;"), v("100%", "padding-bottom: 100%;"), v("calc(24px)", "padding-bottom: calc(24px);"), v("clamp(24px, 2em, 48px)", "padding-bottom: clamp(24px, 2em, 48px);"), v("min(24px)", "padding-bottom: min(24px);"), v("max(24px)", "padding-bottom: max(24px);"), v("round(nearest, 24px, 2em)", "padding-bottom: round(nearest, 24px, 2em);"), v("abs(24px)", "padding-bottom: abs(24px);"), v("env(my-ident, 48px)", "padding-bottom: env(my-ident, 48px);"), ], }, { number: 78, name: "padding-inline", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003epadding-inline\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "PaddingTopProp , [ PaddingTopProp ]", ebnf: "padding-inline =\n PaddingTopProp , [ PaddingTopProp ]", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 18, shown: 18, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "padding-inline: 24px;"), v("48px", "padding-inline: 48px;"), v("8px", "padding-inline: 8px;"), v("16px", "padding-inline: 16px;"), v("64px", "padding-inline: 64px;"), v("50%", "padding-inline: 50%;"), v("80%", "padding-inline: 80%;"), v("30%", "padding-inline: 30%;"), v("65%", "padding-inline: 65%;"), v("15%", "padding-inline: 15%;"), v("100%", "padding-inline: 100%;"), v("calc(24px)", "padding-inline: calc(24px);"), v("clamp(24px, 2em, 48px)", "padding-inline: clamp(24px, 2em, 48px);"), v("min(24px)", "padding-inline: min(24px);"), v("max(24px)", "padding-inline: max(24px);"), v("round(nearest, 24px, 2em)", "padding-inline: round(nearest, 24px, 2em);"), v("abs(24px)", "padding-inline: abs(24px);"), v("env(my-ident, 48px)", "padding-inline: env(my-ident, 48px);"), ], }, { number: 79, name: "padding-inline-end", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003epadding-inline-end\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the logical inline end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "PaddingTopProp", ebnf: "padding-inline-end =\n PaddingTopProp", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 18, shown: 18, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "padding-inline-end: 24px;"), v("48px", "padding-inline-end: 48px;"), v("8px", "padding-inline-end: 8px;"), v("16px", "padding-inline-end: 16px;"), v("64px", "padding-inline-end: 64px;"), v("50%", "padding-inline-end: 50%;"), v("80%", "padding-inline-end: 80%;"), v("30%", "padding-inline-end: 30%;"), v("65%", "padding-inline-end: 65%;"), v("15%", "padding-inline-end: 15%;"), v("100%", "padding-inline-end: 100%;"), v("calc(24px)", "padding-inline-end: calc(24px);"), v("clamp(24px, 2em, 48px)", "padding-inline-end: clamp(24px, 2em, 48px);"), v("min(24px)", "padding-inline-end: min(24px);"), v("max(24px)", "padding-inline-end: max(24px);"), v("round(nearest, 24px, 2em)", "padding-inline-end: round(nearest, 24px, 2em);"), v("abs(24px)", "padding-inline-end: abs(24px);"), v("env(my-ident, 48px)", "padding-inline-end: env(my-ident, 48px);"), ], }, { number: 80, name: "padding-inline-start", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003epadding-inline-start\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the logical inline start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "PaddingTopProp", ebnf: "padding-inline-start =\n PaddingTopProp", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 18, shown: 18, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "padding-inline-start: 24px;"), v("48px", "padding-inline-start: 48px;"), v("8px", "padding-inline-start: 8px;"), v("16px", "padding-inline-start: 16px;"), v("64px", "padding-inline-start: 64px;"), v("50%", "padding-inline-start: 50%;"), v("80%", "padding-inline-start: 80%;"), v("30%", "padding-inline-start: 30%;"), v("65%", "padding-inline-start: 65%;"), v("15%", "padding-inline-start: 15%;"), v("100%", "padding-inline-start: 100%;"), v("calc(24px)", "padding-inline-start: calc(24px);"), v("clamp(24px, 2em, 48px)", "padding-inline-start: clamp(24px, 2em, 48px);"), v("min(24px)", "padding-inline-start: min(24px);"), v("max(24px)", "padding-inline-start: max(24px);"), v("round(nearest, 24px, 2em)", "padding-inline-start: round(nearest, 24px, 2em);"), v("abs(24px)", "padding-inline-start: abs(24px);"), v("env(my-ident, 48px)", "padding-inline-start: env(my-ident, 48px);"), ], }, { number: 81, name: "padding-left", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003epadding-left\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the width of the \u003ca href=\"/en-US/docs/Web/CSS/Guides/Box_model/Introduction#padding_area\"\u003epadding area\u003c/a\u003e to the left of an element.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "NonNegativeLengthPercentageType", ebnf: "padding-left =\n NonNegativeLengthPercentageType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 18, shown: 18, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "padding-left: 24px;"), v("48px", "padding-left: 48px;"), v("8px", "padding-left: 8px;"), v("16px", "padding-left: 16px;"), v("64px", "padding-left: 64px;"), v("50%", "padding-left: 50%;"), v("80%", "padding-left: 80%;"), v("30%", "padding-left: 30%;"), v("65%", "padding-left: 65%;"), v("15%", "padding-left: 15%;"), v("100%", "padding-left: 100%;"), v("calc(24px)", "padding-left: calc(24px);"), v("clamp(24px, 2em, 48px)", "padding-left: clamp(24px, 2em, 48px);"), v("min(24px)", "padding-left: min(24px);"), v("max(24px)", "padding-left: max(24px);"), v("round(nearest, 24px, 2em)", "padding-left: round(nearest, 24px, 2em);"), v("abs(24px)", "padding-left: abs(24px);"), v("env(my-ident, 48px)", "padding-left: env(my-ident, 48px);"), ], }, { number: 82, name: "padding-right", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003epadding-right\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the width of the \u003ca href=\"/en-US/docs/Web/CSS/Guides/Box_model/Introduction#padding_area\"\u003epadding area\u003c/a\u003e on the right of an element.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "NonNegativeLengthPercentageType", ebnf: "padding-right =\n NonNegativeLengthPercentageType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 18, shown: 18, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "padding-right: 24px;"), v("48px", "padding-right: 48px;"), v("8px", "padding-right: 8px;"), v("16px", "padding-right: 16px;"), v("64px", "padding-right: 64px;"), v("50%", "padding-right: 50%;"), v("80%", "padding-right: 80%;"), v("30%", "padding-right: 30%;"), v("65%", "padding-right: 65%;"), v("15%", "padding-right: 15%;"), v("100%", "padding-right: 100%;"), v("calc(24px)", "padding-right: calc(24px);"), v("clamp(24px, 2em, 48px)", "padding-right: clamp(24px, 2em, 48px);"), v("min(24px)", "padding-right: min(24px);"), v("max(24px)", "padding-right: max(24px);"), v("round(nearest, 24px, 2em)", "padding-right: round(nearest, 24px, 2em);"), v("abs(24px)", "padding-right: abs(24px);"), v("env(my-ident, 48px)", "padding-right: env(my-ident, 48px);"), ], }, { number: 83, name: "padding-top", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003epadding-top\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the height of the \u003ca href=\"/en-US/docs/Web/CSS/Guides/Box_model/Introduction#padding_area\"\u003epadding area\u003c/a\u003e on the top of an element.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "NonNegativeLengthPercentageType", ebnf: "padding-top =\n NonNegativeLengthPercentageType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 18, shown: 18, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "padding-top: 24px;"), v("48px", "padding-top: 48px;"), v("8px", "padding-top: 8px;"), v("16px", "padding-top: 16px;"), v("64px", "padding-top: 64px;"), v("50%", "padding-top: 50%;"), v("80%", "padding-top: 80%;"), v("30%", "padding-top: 30%;"), v("65%", "padding-top: 65%;"), v("15%", "padding-top: 15%;"), v("100%", "padding-top: 100%;"), v("calc(24px)", "padding-top: calc(24px);"), v("clamp(24px, 2em, 48px)", "padding-top: clamp(24px, 2em, 48px);"), v("min(24px)", "padding-top: min(24px);"), v("max(24px)", "padding-top: max(24px);"), v("round(nearest, 24px, 2em)", "padding-top: round(nearest, 24px, 2em);"), v("abs(24px)", "padding-top: abs(24px);"), v("env(my-ident, 48px)", "padding-top: env(my-ident, 48px);"), ], }, ], }, { id: "sizing", sigil: "07", title: "Sizing", blurb: "Width, height and their min/max bounds, plus aspect-ratio.", demo: "generic", sampleKind: "box", group: "families", focus: false, gallery: false, count: 19, properties: [ { number: 84, name: "aspect-ratio", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003easpect-ratio\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property allows you to define the desired width-to-height ratio of an element's box. This means that even if the parent container or viewport size changes, the browser will adjust the element's dimensions to maintain the specified width-to-height ratio. The specified \u003ca href=\"/en-US/docs/Glossary/Aspect_ratio\"\u003easpect ratio\u003c/a\u003e is used in the calculation of auto sizes and some other layout functions.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" , [ RatioType ] | RatioType , [ \"auto\" ]", ebnf: "aspect-ratio =\n \"auto\" , [ RatioType ] | RatioType , [ \"auto\" ]", valueType: "keyword", defaultValue: "auto 1/ 0.5", related: [], provenance: "assisted", truncated: true, trueCount: 91, shown: 50, assists: [{ type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }], values: [ v("auto 1/ 1", "aspect-ratio: auto 1/ 1;"), v("auto 1/ 0.5", "aspect-ratio: auto 1/ 0.5;"), v("auto 1/ 2", "aspect-ratio: auto 1/ 2;"), v("auto 1/ 0.75", "aspect-ratio: auto 1/ 0.75;"), v("auto 1/ 0.25", "aspect-ratio: auto 1/ 0.25;"), v("auto 1", "aspect-ratio: auto 1;"), v("auto 0.5/ 1", "aspect-ratio: auto 0.5/ 1;"), v("auto 0.5/ 0.5", "aspect-ratio: auto 0.5/ 0.5;"), v("auto 0.5/ 2", "aspect-ratio: auto 0.5/ 2;"), v("auto 0.5/ 0.75", "aspect-ratio: auto 0.5/ 0.75;"), v("auto 0.5/ 0.25", "aspect-ratio: auto 0.5/ 0.25;"), v("auto 0.5", "aspect-ratio: auto 0.5;"), v("auto 2/ 1", "aspect-ratio: auto 2/ 1;"), v("auto 2/ 0.5", "aspect-ratio: auto 2/ 0.5;"), v("auto 2/ 2", "aspect-ratio: auto 2/ 2;"), v("auto 2/ 0.75", "aspect-ratio: auto 2/ 0.75;"), v("auto 2/ 0.25", "aspect-ratio: auto 2/ 0.25;"), v("auto 2", "aspect-ratio: auto 2;"), v("auto 0.75/ 1", "aspect-ratio: auto 0.75/ 1;"), v("auto 0.75/ 0.5", "aspect-ratio: auto 0.75/ 0.5;"), v("auto 0.75/ 2", "aspect-ratio: auto 0.75/ 2;"), v("auto 0.75/ 0.75", "aspect-ratio: auto 0.75/ 0.75;"), v("auto 0.75/ 0.25", "aspect-ratio: auto 0.75/ 0.25;"), v("auto 0.75", "aspect-ratio: auto 0.75;"), v("auto 0.25/ 1", "aspect-ratio: auto 0.25/ 1;"), v("auto 0.25/ 0.5", "aspect-ratio: auto 0.25/ 0.5;"), v("auto 0.25/ 2", "aspect-ratio: auto 0.25/ 2;"), v("auto 0.25/ 0.75", "aspect-ratio: auto 0.25/ 0.75;"), v("auto 0.25/ 0.25", "aspect-ratio: auto 0.25/ 0.25;"), v("auto 0.25", "aspect-ratio: auto 0.25;"), v("auto", "aspect-ratio: auto;"), v("1/ 1 auto", "aspect-ratio: 1/ 1 auto;"), v("1/ 1", "aspect-ratio: 1/ 1;"), v("1/ 0.5 auto", "aspect-ratio: 1/ 0.5 auto;"), v("1/ 0.5", "aspect-ratio: 1/ 0.5;"), v("1/ 2 auto", "aspect-ratio: 1/ 2 auto;"), v("1/ 2", "aspect-ratio: 1/ 2;"), v("1/ 0.75 auto", "aspect-ratio: 1/ 0.75 auto;"), v("1/ 0.75", "aspect-ratio: 1/ 0.75;"), v("1/ 0.25 auto", "aspect-ratio: 1/ 0.25 auto;"), v("1/ 0.25", "aspect-ratio: 1/ 0.25;"), v("1 auto", "aspect-ratio: 1 auto;"), v("1", "aspect-ratio: 1;"), v("0.5/ 1 auto", "aspect-ratio: 0.5/ 1 auto;"), v("0.5/ 1", "aspect-ratio: 0.5/ 1;"), v("0.5/ 0.5 auto", "aspect-ratio: 0.5/ 0.5 auto;"), v("0.5/ 0.5", "aspect-ratio: 0.5/ 0.5;"), v("0.5/ 2 auto", "aspect-ratio: 0.5/ 2 auto;"), v("0.5/ 2", "aspect-ratio: 0.5/ 2;"), v("0.5/ 0.75 auto", "aspect-ratio: 0.5/ 0.75 auto;"), ], }, { number: 85, name: "block-size", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eblock-size\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the size of an element's block along the \u003ca href=\"/en-US/docs/Glossary/Grid_Axis\"\u003eblock axis\u003c/a\u003e. If the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e is horizontal, it corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/height\"\u003e\u003ccode\u003eheight\u003c/code\u003e\u003c/a\u003e; if the writing mode is vertical, it corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/width\"\u003e\u003ccode\u003ewidth\u003c/code\u003e\u003c/a\u003e. A related property is \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/inline-size\"\u003e\u003ccode\u003einline-size\u003c/code\u003e\u003c/a\u003e, which defines the other dimension of the element.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "WidthProp", ebnf: "block-size =\n WidthProp", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 27, shown: 27, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "block-size: auto;"), v("24px", "block-size: 24px;"), v("48px", "block-size: 48px;"), v("8px", "block-size: 8px;"), v("16px", "block-size: 16px;"), v("64px", "block-size: 64px;"), v("50%", "block-size: 50%;"), v("80%", "block-size: 80%;"), v("30%", "block-size: 30%;"), v("65%", "block-size: 65%;"), v("15%", "block-size: 15%;"), v("100%", "block-size: 100%;"), v("calc(24px)", "block-size: calc(24px);"), v("clamp(24px, 2em, 48px)", "block-size: clamp(24px, 2em, 48px);"), v("min(24px)", "block-size: min(24px);"), v("max(24px)", "block-size: max(24px);"), v("round(nearest, 24px, 2em)", "block-size: round(nearest, 24px, 2em);"), v("abs(24px)", "block-size: abs(24px);"), v("env(my-ident, 48px)", "block-size: env(my-ident, 48px);"), v("min-content", "block-size: min-content;"), v("max-content", "block-size: max-content;"), v("fit-content(24px)", "block-size: fit-content(24px);"), v("calc-size(auto, 2em)", "block-size: calc-size(auto, 2em);"), v("anchor-size(--my-var width, 48px)", "block-size: anchor-size(--my-var width, 48px);"), v("stretch", "block-size: stretch;"), v("fit-content", "block-size: fit-content;"), v("contain", "block-size: contain;"), ], }, { number: 86, name: "box-sizing", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebox-sizing\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets how the total width and height of an element is calculated.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"content-box\" | \"border-box\"", ebnf: "box-sizing =\n \"content-box\" | \"border-box\"", valueType: "keyword", defaultValue: "border-box", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("content-box", "box-sizing: content-box;"), v("border-box", "box-sizing: border-box;"), ], }, { number: 87, name: "contain-intrinsic-block-size", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003econtain-intrinsic-block-size\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Logical_properties_and_values\"\u003elogical property\u003c/a\u003e defines the block size of an element that a browser can use for layout when the element is subject to \u003ca href=\"/en-US/docs/Web/CSS/Guides/Containment/Using#size_containment\"\u003esize containment\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "[ \"auto\" ] , ( \"none\" | NonNegativeLengthType )", ebnf: "contain-intrinsic-block-size =\n [ \"auto\" ] , ( \"none\" | NonNegativeLengthType )", valueType: "length", defaultValue: "auto 24px", related: [], provenance: "assisted", truncated: false, trueCount: 12, shown: 12, assists: [{ type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("auto none", "contain-intrinsic-block-size: auto none;"), v("auto 24px", "contain-intrinsic-block-size: auto 24px;"), v("auto 48px", "contain-intrinsic-block-size: auto 48px;"), v("auto 8px", "contain-intrinsic-block-size: auto 8px;"), v("auto 16px", "contain-intrinsic-block-size: auto 16px;"), v("auto 64px", "contain-intrinsic-block-size: auto 64px;"), v("none", "contain-intrinsic-block-size: none;"), v("24px", "contain-intrinsic-block-size: 24px;"), v("48px", "contain-intrinsic-block-size: 48px;"), v("8px", "contain-intrinsic-block-size: 8px;"), v("16px", "contain-intrinsic-block-size: 16px;"), v("64px", "contain-intrinsic-block-size: 64px;"), ], }, { number: 88, name: "contain-intrinsic-height", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003econtain-intrinsic-height\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the height of an element that a browser can use for layout when the element is subject to \u003ca href=\"/en-US/docs/Web/CSS/Guides/Containment/Using#size_containment\"\u003esize containment\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "[ \"auto\" ] , ( \"none\" | NonNegativeLengthType )", ebnf: "contain-intrinsic-height =\n [ \"auto\" ] , ( \"none\" | NonNegativeLengthType )", valueType: "length", defaultValue: "auto 24px", related: [], provenance: "assisted", truncated: false, trueCount: 12, shown: 12, assists: [{ type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("auto none", "contain-intrinsic-height: auto none;"), v("auto 24px", "contain-intrinsic-height: auto 24px;"), v("auto 48px", "contain-intrinsic-height: auto 48px;"), v("auto 8px", "contain-intrinsic-height: auto 8px;"), v("auto 16px", "contain-intrinsic-height: auto 16px;"), v("auto 64px", "contain-intrinsic-height: auto 64px;"), v("none", "contain-intrinsic-height: none;"), v("24px", "contain-intrinsic-height: 24px;"), v("48px", "contain-intrinsic-height: 48px;"), v("8px", "contain-intrinsic-height: 8px;"), v("16px", "contain-intrinsic-height: 16px;"), v("64px", "contain-intrinsic-height: 64px;"), ], }, { number: 89, name: "contain-intrinsic-inline-size", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003econtain-intrinsic-inline-size\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Logical_properties_and_values\"\u003elogical property\u003c/a\u003e defines the inline-size of an element that a browser can use for layout when the element is subject to \u003ca href=\"/en-US/docs/Web/CSS/Guides/Containment/Using#size_containment\"\u003esize containment\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "[ \"auto\" ] , ( \"none\" | NonNegativeLengthType )", ebnf: "contain-intrinsic-inline-size =\n [ \"auto\" ] , ( \"none\" | NonNegativeLengthType )", valueType: "length", defaultValue: "auto 24px", related: [], provenance: "assisted", truncated: false, trueCount: 12, shown: 12, assists: [{ type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("auto none", "contain-intrinsic-inline-size: auto none;"), v("auto 24px", "contain-intrinsic-inline-size: auto 24px;"), v("auto 48px", "contain-intrinsic-inline-size: auto 48px;"), v("auto 8px", "contain-intrinsic-inline-size: auto 8px;"), v("auto 16px", "contain-intrinsic-inline-size: auto 16px;"), v("auto 64px", "contain-intrinsic-inline-size: auto 64px;"), v("none", "contain-intrinsic-inline-size: none;"), v("24px", "contain-intrinsic-inline-size: 24px;"), v("48px", "contain-intrinsic-inline-size: 48px;"), v("8px", "contain-intrinsic-inline-size: 8px;"), v("16px", "contain-intrinsic-inline-size: 16px;"), v("64px", "contain-intrinsic-inline-size: 64px;"), ], }, { number: 90, name: "contain-intrinsic-size", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003econtain-intrinsic-size\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e sets the size of an element that a browser will use for layout when the element is subject to \u003ca href=\"/en-US/docs/Web/CSS/Guides/Containment/Using#size_containment\"\u003esize containment\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ContainIntrinsicSizePropItem , [ ContainIntrinsicSizePropItem ]", ebnf: "contain-intrinsic-size =\n ContainIntrinsicSizePropItem , [ ContainIntrinsicSizePropItem ]", valueType: "length", defaultValue: "auto 24px", related: [], provenance: "assisted", truncated: false, trueCount: 12, shown: 12, assists: [{ type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("auto none", "contain-intrinsic-size: auto none;"), v("auto 24px", "contain-intrinsic-size: auto 24px;"), v("auto 48px", "contain-intrinsic-size: auto 48px;"), v("auto 8px", "contain-intrinsic-size: auto 8px;"), v("auto 16px", "contain-intrinsic-size: auto 16px;"), v("auto 64px", "contain-intrinsic-size: auto 64px;"), v("none", "contain-intrinsic-size: none;"), v("24px", "contain-intrinsic-size: 24px;"), v("48px", "contain-intrinsic-size: 48px;"), v("8px", "contain-intrinsic-size: 8px;"), v("16px", "contain-intrinsic-size: 16px;"), v("64px", "contain-intrinsic-size: 64px;"), ], }, { number: 91, name: "contain-intrinsic-width", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003econtain-intrinsic-width\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the width of an element that a browser will use for layout when the element is subject to \u003ca href=\"/en-US/docs/Web/CSS/Guides/Containment/Using#size_containment\"\u003esize containment\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "[ \"auto\" ] , ( \"none\" | NonNegativeLengthType )", ebnf: "contain-intrinsic-width =\n [ \"auto\" ] , ( \"none\" | NonNegativeLengthType )", valueType: "length", defaultValue: "auto 24px", related: [], provenance: "assisted", truncated: false, trueCount: 12, shown: 12, assists: [{ type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("auto none", "contain-intrinsic-width: auto none;"), v("auto 24px", "contain-intrinsic-width: auto 24px;"), v("auto 48px", "contain-intrinsic-width: auto 48px;"), v("auto 8px", "contain-intrinsic-width: auto 8px;"), v("auto 16px", "contain-intrinsic-width: auto 16px;"), v("auto 64px", "contain-intrinsic-width: auto 64px;"), v("none", "contain-intrinsic-width: none;"), v("24px", "contain-intrinsic-width: 24px;"), v("48px", "contain-intrinsic-width: 48px;"), v("8px", "contain-intrinsic-width: 8px;"), v("16px", "contain-intrinsic-width: 16px;"), v("64px", "contain-intrinsic-width: 64px;"), ], }, { number: 92, name: "height", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eheight\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the height of an element. By default, the property defines the height of the \u003ca href=\"/en-US/docs/Web/CSS/Guides/Box_model/Introduction#content_area\"\u003econtent area\u003c/a\u003e. If \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/box-sizing\"\u003e\u003ccode\u003ebox-sizing\u003c/code\u003e\u003c/a\u003e is set to \u003ccode\u003eborder-box\u003c/code\u003e, however, it instead determines the height of the \u003ca href=\"/en-US/docs/Web/CSS/Guides/Box_model/Introduction#border_area\"\u003eborder area\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | NonNegativeLengthPercentageType | \"min-content\" | \"max-content\" | FitContentFn | CalcSizeFn | AnchorSizeFn | \"stretch\" | \"fit-content\" | \"contain\"", ebnf: "height =\n \"auto\" | NonNegativeLengthPercentageType | \"min-content\" | \"max-content\" | FitContentFn | CalcSizeFn | AnchorSizeFn | \"stretch\" | \"fit-content\" | \"contain\"", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 27, shown: 27, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "height: auto;"), v("24px", "height: 24px;"), v("48px", "height: 48px;"), v("8px", "height: 8px;"), v("16px", "height: 16px;"), v("64px", "height: 64px;"), v("50%", "height: 50%;"), v("80%", "height: 80%;"), v("30%", "height: 30%;"), v("65%", "height: 65%;"), v("15%", "height: 15%;"), v("100%", "height: 100%;"), v("calc(24px)", "height: calc(24px);"), v("clamp(24px, 2em, 48px)", "height: clamp(24px, 2em, 48px);"), v("min(24px)", "height: min(24px);"), v("max(24px)", "height: max(24px);"), v("round(nearest, 24px, 2em)", "height: round(nearest, 24px, 2em);"), v("abs(24px)", "height: abs(24px);"), v("env(my-ident, 48px)", "height: env(my-ident, 48px);"), v("min-content", "height: min-content;"), v("max-content", "height: max-content;"), v("fit-content(24px)", "height: fit-content(24px);"), v("calc-size(auto, 2em)", "height: calc-size(auto, 2em);"), v("anchor-size(--my-var width, 48px)", "height: anchor-size(--my-var width, 48px);"), v("stretch", "height: stretch;"), v("fit-content", "height: fit-content;"), v("contain", "height: contain;"), ], }, { number: 93, name: "inline-size", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003einline-size\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the size of an element's block along the \u003ca href=\"/en-US/docs/Glossary/Grid_Axis\"\u003einline axis\u003c/a\u003e. If the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e is horizontal, it corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/width\"\u003e\u003ccode\u003ewidth\u003c/code\u003e\u003c/a\u003e; if the writing mode is vertical, it corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/height\"\u003e\u003ccode\u003eheight\u003c/code\u003e\u003c/a\u003e. A related property is \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/block-size\"\u003e\u003ccode\u003eblock-size\u003c/code\u003e\u003c/a\u003e, which defines the other dimension of the element.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "WidthProp", ebnf: "inline-size =\n WidthProp", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 27, shown: 27, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "inline-size: auto;"), v("24px", "inline-size: 24px;"), v("48px", "inline-size: 48px;"), v("8px", "inline-size: 8px;"), v("16px", "inline-size: 16px;"), v("64px", "inline-size: 64px;"), v("50%", "inline-size: 50%;"), v("80%", "inline-size: 80%;"), v("30%", "inline-size: 30%;"), v("65%", "inline-size: 65%;"), v("15%", "inline-size: 15%;"), v("100%", "inline-size: 100%;"), v("calc(24px)", "inline-size: calc(24px);"), v("clamp(24px, 2em, 48px)", "inline-size: clamp(24px, 2em, 48px);"), v("min(24px)", "inline-size: min(24px);"), v("max(24px)", "inline-size: max(24px);"), v("round(nearest, 24px, 2em)", "inline-size: round(nearest, 24px, 2em);"), v("abs(24px)", "inline-size: abs(24px);"), v("env(my-ident, 48px)", "inline-size: env(my-ident, 48px);"), v("min-content", "inline-size: min-content;"), v("max-content", "inline-size: max-content;"), v("fit-content(24px)", "inline-size: fit-content(24px);"), v("calc-size(auto, 2em)", "inline-size: calc-size(auto, 2em);"), v("anchor-size(--my-var width, 48px)", "inline-size: anchor-size(--my-var width, 48px);"), v("stretch", "inline-size: stretch;"), v("fit-content", "inline-size: fit-content;"), v("contain", "inline-size: contain;"), ], }, { number: 94, name: "max-block-size", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emax-block-size\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the maximum size of an element in the direction opposite that of the writing direction as specified by \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e. That is, if the writing direction is horizontal, then \u003ccode\u003emax-block-size\u003c/code\u003e is equivalent to \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/max-height\"\u003e\u003ccode\u003emax-height\u003c/code\u003e\u003c/a\u003e; if the writing direction is vertical, \u003ccode\u003emax-block-size\u003c/code\u003e is the same as \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/max-width\"\u003e\u003ccode\u003emax-width\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "MaxWidthProp", ebnf: "max-block-size =\n MaxWidthProp", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 27, shown: 27, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("none", "max-block-size: none;"), v("24px", "max-block-size: 24px;"), v("48px", "max-block-size: 48px;"), v("8px", "max-block-size: 8px;"), v("16px", "max-block-size: 16px;"), v("64px", "max-block-size: 64px;"), v("50%", "max-block-size: 50%;"), v("80%", "max-block-size: 80%;"), v("30%", "max-block-size: 30%;"), v("65%", "max-block-size: 65%;"), v("15%", "max-block-size: 15%;"), v("100%", "max-block-size: 100%;"), v("calc(24px)", "max-block-size: calc(24px);"), v("clamp(24px, 2em, 48px)", "max-block-size: clamp(24px, 2em, 48px);"), v("min(24px)", "max-block-size: min(24px);"), v("max(24px)", "max-block-size: max(24px);"), v("round(nearest, 24px, 2em)", "max-block-size: round(nearest, 24px, 2em);"), v("abs(24px)", "max-block-size: abs(24px);"), v("env(my-ident, 48px)", "max-block-size: env(my-ident, 48px);"), v("min-content", "max-block-size: min-content;"), v("max-content", "max-block-size: max-content;"), v("fit-content(24px)", "max-block-size: fit-content(24px);"), v("calc-size(auto, 2em)", "max-block-size: calc-size(auto, 2em);"), v("anchor-size(--my-var width, 48px)", "max-block-size: anchor-size(--my-var width, 48px);"), v("stretch", "max-block-size: stretch;"), v("fit-content", "max-block-size: fit-content;"), v("contain", "max-block-size: contain;"), ], }, { number: 95, name: "max-height", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emax-height\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the maximum height of an element. It prevents the \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Property_value_processing#used_value\"\u003eused value\u003c/a\u003e of the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/height\"\u003e\u003ccode\u003eheight\u003c/code\u003e\u003c/a\u003e property from becoming larger than the value specified for \u003ccode\u003emax-height\u003c/code\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | NonNegativeLengthPercentageType | \"min-content\" | \"max-content\" | FitContentFn | CalcSizeFn | AnchorSizeFn | \"stretch\" | \"fit-content\" | \"contain\"", ebnf: "max-height =\n \"none\" | NonNegativeLengthPercentageType | \"min-content\" | \"max-content\" | FitContentFn | CalcSizeFn | AnchorSizeFn | \"stretch\" | \"fit-content\" | \"contain\"", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 27, shown: 27, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("none", "max-height: none;"), v("24px", "max-height: 24px;"), v("48px", "max-height: 48px;"), v("8px", "max-height: 8px;"), v("16px", "max-height: 16px;"), v("64px", "max-height: 64px;"), v("50%", "max-height: 50%;"), v("80%", "max-height: 80%;"), v("30%", "max-height: 30%;"), v("65%", "max-height: 65%;"), v("15%", "max-height: 15%;"), v("100%", "max-height: 100%;"), v("calc(24px)", "max-height: calc(24px);"), v("clamp(24px, 2em, 48px)", "max-height: clamp(24px, 2em, 48px);"), v("min(24px)", "max-height: min(24px);"), v("max(24px)", "max-height: max(24px);"), v("round(nearest, 24px, 2em)", "max-height: round(nearest, 24px, 2em);"), v("abs(24px)", "max-height: abs(24px);"), v("env(my-ident, 48px)", "max-height: env(my-ident, 48px);"), v("min-content", "max-height: min-content;"), v("max-content", "max-height: max-content;"), v("fit-content(24px)", "max-height: fit-content(24px);"), v("calc-size(auto, 2em)", "max-height: calc-size(auto, 2em);"), v("anchor-size(--my-var width, 48px)", "max-height: anchor-size(--my-var width, 48px);"), v("stretch", "max-height: stretch;"), v("fit-content", "max-height: fit-content;"), v("contain", "max-height: contain;"), ], }, { number: 96, name: "max-inline-size", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emax-inline-size\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the horizontal or vertical maximum size of an element's block, depending on its writing mode. It corresponds to either the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/max-width\"\u003e\u003ccode\u003emax-width\u003c/code\u003e\u003c/a\u003e or the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/max-height\"\u003e\u003ccode\u003emax-height\u003c/code\u003e\u003c/a\u003e property, depending on the value of \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "MaxWidthProp", ebnf: "max-inline-size =\n MaxWidthProp", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 27, shown: 27, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("none", "max-inline-size: none;"), v("24px", "max-inline-size: 24px;"), v("48px", "max-inline-size: 48px;"), v("8px", "max-inline-size: 8px;"), v("16px", "max-inline-size: 16px;"), v("64px", "max-inline-size: 64px;"), v("50%", "max-inline-size: 50%;"), v("80%", "max-inline-size: 80%;"), v("30%", "max-inline-size: 30%;"), v("65%", "max-inline-size: 65%;"), v("15%", "max-inline-size: 15%;"), v("100%", "max-inline-size: 100%;"), v("calc(24px)", "max-inline-size: calc(24px);"), v("clamp(24px, 2em, 48px)", "max-inline-size: clamp(24px, 2em, 48px);"), v("min(24px)", "max-inline-size: min(24px);"), v("max(24px)", "max-inline-size: max(24px);"), v("round(nearest, 24px, 2em)", "max-inline-size: round(nearest, 24px, 2em);"), v("abs(24px)", "max-inline-size: abs(24px);"), v("env(my-ident, 48px)", "max-inline-size: env(my-ident, 48px);"), v("min-content", "max-inline-size: min-content;"), v("max-content", "max-inline-size: max-content;"), v("fit-content(24px)", "max-inline-size: fit-content(24px);"), v("calc-size(auto, 2em)", "max-inline-size: calc-size(auto, 2em);"), v("anchor-size(--my-var width, 48px)", "max-inline-size: anchor-size(--my-var width, 48px);"), v("stretch", "max-inline-size: stretch;"), v("fit-content", "max-inline-size: fit-content;"), v("contain", "max-inline-size: contain;"), ], }, { number: 97, name: "max-width", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emax-width\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the maximum width of an element. It prevents the \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Property_value_processing#used_value\"\u003eused value\u003c/a\u003e of the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/width\"\u003e\u003ccode\u003ewidth\u003c/code\u003e\u003c/a\u003e property from becoming larger than the value specified by \u003ccode\u003emax-width\u003c/code\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | NonNegativeLengthPercentageType | \"min-content\" | \"max-content\" | FitContentFn | CalcSizeFn | AnchorSizeFn | \"stretch\" | \"fit-content\" | \"contain\"", ebnf: "max-width =\n \"none\" | NonNegativeLengthPercentageType | \"min-content\" | \"max-content\" | FitContentFn | CalcSizeFn | AnchorSizeFn | \"stretch\" | \"fit-content\" | \"contain\"", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 27, shown: 27, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("none", "max-width: none;"), v("24px", "max-width: 24px;"), v("48px", "max-width: 48px;"), v("8px", "max-width: 8px;"), v("16px", "max-width: 16px;"), v("64px", "max-width: 64px;"), v("50%", "max-width: 50%;"), v("80%", "max-width: 80%;"), v("30%", "max-width: 30%;"), v("65%", "max-width: 65%;"), v("15%", "max-width: 15%;"), v("100%", "max-width: 100%;"), v("calc(24px)", "max-width: calc(24px);"), v("clamp(24px, 2em, 48px)", "max-width: clamp(24px, 2em, 48px);"), v("min(24px)", "max-width: min(24px);"), v("max(24px)", "max-width: max(24px);"), v("round(nearest, 24px, 2em)", "max-width: round(nearest, 24px, 2em);"), v("abs(24px)", "max-width: abs(24px);"), v("env(my-ident, 48px)", "max-width: env(my-ident, 48px);"), v("min-content", "max-width: min-content;"), v("max-content", "max-width: max-content;"), v("fit-content(24px)", "max-width: fit-content(24px);"), v("calc-size(auto, 2em)", "max-width: calc-size(auto, 2em);"), v("anchor-size(--my-var width, 48px)", "max-width: anchor-size(--my-var width, 48px);"), v("stretch", "max-width: stretch;"), v("fit-content", "max-width: fit-content;"), v("contain", "max-width: contain;"), ], }, { number: 98, name: "min-block-size", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emin-block-size\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the minimum horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/min-width\"\u003e\u003ccode\u003emin-width\u003c/code\u003e\u003c/a\u003e or the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/min-height\"\u003e\u003ccode\u003emin-height\u003c/code\u003e\u003c/a\u003e property, depending on the value of \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "MinWidthProp", ebnf: "min-block-size =\n MinWidthProp", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 27, shown: 27, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "min-block-size: auto;"), v("24px", "min-block-size: 24px;"), v("48px", "min-block-size: 48px;"), v("8px", "min-block-size: 8px;"), v("16px", "min-block-size: 16px;"), v("64px", "min-block-size: 64px;"), v("50%", "min-block-size: 50%;"), v("80%", "min-block-size: 80%;"), v("30%", "min-block-size: 30%;"), v("65%", "min-block-size: 65%;"), v("15%", "min-block-size: 15%;"), v("100%", "min-block-size: 100%;"), v("calc(24px)", "min-block-size: calc(24px);"), v("clamp(24px, 2em, 48px)", "min-block-size: clamp(24px, 2em, 48px);"), v("min(24px)", "min-block-size: min(24px);"), v("max(24px)", "min-block-size: max(24px);"), v("round(nearest, 24px, 2em)", "min-block-size: round(nearest, 24px, 2em);"), v("abs(24px)", "min-block-size: abs(24px);"), v("env(my-ident, 48px)", "min-block-size: env(my-ident, 48px);"), v("min-content", "min-block-size: min-content;"), v("max-content", "min-block-size: max-content;"), v("fit-content(24px)", "min-block-size: fit-content(24px);"), v("calc-size(auto, 2em)", "min-block-size: calc-size(auto, 2em);"), v("anchor-size(--my-var width, 48px)", "min-block-size: anchor-size(--my-var width, 48px);"), v("stretch", "min-block-size: stretch;"), v("fit-content", "min-block-size: fit-content;"), v("contain", "min-block-size: contain;"), ], }, { number: 99, name: "min-height", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emin-height\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the minimum height of an element. It prevents the \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Property_value_processing#used_value\"\u003eused value\u003c/a\u003e of the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/height\"\u003e\u003ccode\u003eheight\u003c/code\u003e\u003c/a\u003e property from becoming smaller than the value specified for \u003ccode\u003emin-height\u003c/code\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | NonNegativeLengthPercentageType | \"min-content\" | \"max-content\" | FitContentFn | CalcSizeFn | AnchorSizeFn | \"stretch\" | \"fit-content\" | \"contain\"", ebnf: "min-height =\n \"auto\" | NonNegativeLengthPercentageType | \"min-content\" | \"max-content\" | FitContentFn | CalcSizeFn | AnchorSizeFn | \"stretch\" | \"fit-content\" | \"contain\"", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 27, shown: 27, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "min-height: auto;"), v("24px", "min-height: 24px;"), v("48px", "min-height: 48px;"), v("8px", "min-height: 8px;"), v("16px", "min-height: 16px;"), v("64px", "min-height: 64px;"), v("50%", "min-height: 50%;"), v("80%", "min-height: 80%;"), v("30%", "min-height: 30%;"), v("65%", "min-height: 65%;"), v("15%", "min-height: 15%;"), v("100%", "min-height: 100%;"), v("calc(24px)", "min-height: calc(24px);"), v("clamp(24px, 2em, 48px)", "min-height: clamp(24px, 2em, 48px);"), v("min(24px)", "min-height: min(24px);"), v("max(24px)", "min-height: max(24px);"), v("round(nearest, 24px, 2em)", "min-height: round(nearest, 24px, 2em);"), v("abs(24px)", "min-height: abs(24px);"), v("env(my-ident, 48px)", "min-height: env(my-ident, 48px);"), v("min-content", "min-height: min-content;"), v("max-content", "min-height: max-content;"), v("fit-content(24px)", "min-height: fit-content(24px);"), v("calc-size(auto, 2em)", "min-height: calc-size(auto, 2em);"), v("anchor-size(--my-var width, 48px)", "min-height: anchor-size(--my-var width, 48px);"), v("stretch", "min-height: stretch;"), v("fit-content", "min-height: fit-content;"), v("contain", "min-height: contain;"), ], }, { number: 100, name: "min-inline-size", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emin-inline-size\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the horizontal or vertical minimal size of an element's block, depending on its writing mode. It corresponds to either the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/min-width\"\u003e\u003ccode\u003emin-width\u003c/code\u003e\u003c/a\u003e or the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/min-height\"\u003e\u003ccode\u003emin-height\u003c/code\u003e\u003c/a\u003e property, depending on the value of \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "MinWidthProp", ebnf: "min-inline-size =\n MinWidthProp", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 27, shown: 27, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "min-inline-size: auto;"), v("24px", "min-inline-size: 24px;"), v("48px", "min-inline-size: 48px;"), v("8px", "min-inline-size: 8px;"), v("16px", "min-inline-size: 16px;"), v("64px", "min-inline-size: 64px;"), v("50%", "min-inline-size: 50%;"), v("80%", "min-inline-size: 80%;"), v("30%", "min-inline-size: 30%;"), v("65%", "min-inline-size: 65%;"), v("15%", "min-inline-size: 15%;"), v("100%", "min-inline-size: 100%;"), v("calc(24px)", "min-inline-size: calc(24px);"), v("clamp(24px, 2em, 48px)", "min-inline-size: clamp(24px, 2em, 48px);"), v("min(24px)", "min-inline-size: min(24px);"), v("max(24px)", "min-inline-size: max(24px);"), v("round(nearest, 24px, 2em)", "min-inline-size: round(nearest, 24px, 2em);"), v("abs(24px)", "min-inline-size: abs(24px);"), v("env(my-ident, 48px)", "min-inline-size: env(my-ident, 48px);"), v("min-content", "min-inline-size: min-content;"), v("max-content", "min-inline-size: max-content;"), v("fit-content(24px)", "min-inline-size: fit-content(24px);"), v("calc-size(auto, 2em)", "min-inline-size: calc-size(auto, 2em);"), v("anchor-size(--my-var width, 48px)", "min-inline-size: anchor-size(--my-var width, 48px);"), v("stretch", "min-inline-size: stretch;"), v("fit-content", "min-inline-size: fit-content;"), v("contain", "min-inline-size: contain;"), ], }, { number: 101, name: "min-width", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emin-width\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the minimum width of an element. It prevents the \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Property_value_processing#used_value\"\u003eused value\u003c/a\u003e of the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/width\"\u003e\u003ccode\u003ewidth\u003c/code\u003e\u003c/a\u003e property from becoming smaller than the value specified for \u003ccode\u003emin-width\u003c/code\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | NonNegativeLengthPercentageType | \"min-content\" | \"max-content\" | FitContentFn | CalcSizeFn | AnchorSizeFn | \"stretch\" | \"fit-content\" | \"contain\"", ebnf: "min-width =\n \"auto\" | NonNegativeLengthPercentageType | \"min-content\" | \"max-content\" | FitContentFn | CalcSizeFn | AnchorSizeFn | \"stretch\" | \"fit-content\" | \"contain\"", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 27, shown: 27, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "min-width: auto;"), v("24px", "min-width: 24px;"), v("48px", "min-width: 48px;"), v("8px", "min-width: 8px;"), v("16px", "min-width: 16px;"), v("64px", "min-width: 64px;"), v("50%", "min-width: 50%;"), v("80%", "min-width: 80%;"), v("30%", "min-width: 30%;"), v("65%", "min-width: 65%;"), v("15%", "min-width: 15%;"), v("100%", "min-width: 100%;"), v("calc(24px)", "min-width: calc(24px);"), v("clamp(24px, 2em, 48px)", "min-width: clamp(24px, 2em, 48px);"), v("min(24px)", "min-width: min(24px);"), v("max(24px)", "min-width: max(24px);"), v("round(nearest, 24px, 2em)", "min-width: round(nearest, 24px, 2em);"), v("abs(24px)", "min-width: abs(24px);"), v("env(my-ident, 48px)", "min-width: env(my-ident, 48px);"), v("min-content", "min-width: min-content;"), v("max-content", "min-width: max-content;"), v("fit-content(24px)", "min-width: fit-content(24px);"), v("calc-size(auto, 2em)", "min-width: calc-size(auto, 2em);"), v("anchor-size(--my-var width, 48px)", "min-width: anchor-size(--my-var width, 48px);"), v("stretch", "min-width: stretch;"), v("fit-content", "min-width: fit-content;"), v("contain", "min-width: contain;"), ], }, { number: 102, name: "width", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ewidth\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets an element's width. By default, it sets the width of the \u003ca href=\"/en-US/docs/Web/CSS/Guides/Box_model/Introduction#content_area\"\u003econtent area\u003c/a\u003e, but if \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/box-sizing\"\u003e\u003ccode\u003ebox-sizing\u003c/code\u003e\u003c/a\u003e is set to \u003ccode\u003eborder-box\u003c/code\u003e, it sets the width of the \u003ca href=\"/en-US/docs/Web/CSS/Guides/Box_model/Introduction#border_area\"\u003eborder area\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | NonNegativeLengthPercentageType | \"min-content\" | \"max-content\" | FitContentFn | CalcSizeFn | AnchorSizeFn | \"stretch\" | \"fit-content\" | \"contain\"", ebnf: "width =\n \"auto\" | NonNegativeLengthPercentageType | \"min-content\" | \"max-content\" | FitContentFn | CalcSizeFn | AnchorSizeFn | \"stretch\" | \"fit-content\" | \"contain\"", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 27, shown: 27, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "width: auto;"), v("24px", "width: 24px;"), v("48px", "width: 48px;"), v("8px", "width: 8px;"), v("16px", "width: 16px;"), v("64px", "width: 64px;"), v("50%", "width: 50%;"), v("80%", "width: 80%;"), v("30%", "width: 30%;"), v("65%", "width: 65%;"), v("15%", "width: 15%;"), v("100%", "width: 100%;"), v("calc(24px)", "width: calc(24px);"), v("clamp(24px, 2em, 48px)", "width: clamp(24px, 2em, 48px);"), v("min(24px)", "width: min(24px);"), v("max(24px)", "width: max(24px);"), v("round(nearest, 24px, 2em)", "width: round(nearest, 24px, 2em);"), v("abs(24px)", "width: abs(24px);"), v("env(my-ident, 48px)", "width: env(my-ident, 48px);"), v("min-content", "width: min-content;"), v("max-content", "width: max-content;"), v("fit-content(24px)", "width: fit-content(24px);"), v("calc-size(auto, 2em)", "width: calc-size(auto, 2em);"), v("anchor-size(--my-var width, 48px)", "width: anchor-size(--my-var width, 48px);"), v("stretch", "width: stretch;"), v("fit-content", "width: fit-content;"), v("contain", "width: contain;"), ], }, ], }, { id: "typography", sigil: "08", title: "Typography \u0026 Font", blurb: "Choosing and tuning the typeface: family, size, weight, features.", demo: "type", sampleKind: "text", group: "families", focus: false, gallery: false, count: 28, properties: [ { number: 103, name: "font", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efont\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e sets all the different properties of an element's font. Alternatively, it sets an element's font to a system font.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "SystemFontFamilyNameType\n | \"italic\" , \"small-caps\" , \"bold\" , \"condensed\" , FontShortSizeType , \"/\" , FontShortLineHeightType , FontShortFamilyType\n | \"small-caps\" , \"bold\" , FontShortSizeType , \"/\" , FontShortLineHeightType , FontShortFamilyType\n | \"italic\" , \"lighter\" , FontShortSizeType , FontShortFamilyType\n | \"oblique\" , \"expanded\" , FontShortSizeType , \"/\" , FontShortLineHeightType , FontShortFamilyType\n | \"bold\" , FontShortSizeType , FontShortFamilyType\n | FontShortSizeType , \"/\" , FontShortLineHeightType , FontShortFamilyType\n | FontShortSizeType , FontShortFamilyType", ebnf: "font =\n SystemFontFamilyNameType\n | \"italic\" , \"small-caps\" , \"bold\" , \"condensed\" , FontShortSizeType , \"/\" , FontShortLineHeightType , FontShortFamilyType\n | \"small-caps\" , \"bold\" , FontShortSizeType , \"/\" , FontShortLineHeightType , FontShortFamilyType\n | \"italic\" , \"lighter\" , FontShortSizeType , FontShortFamilyType\n | \"oblique\" , \"expanded\" , FontShortSizeType , \"/\" , FontShortLineHeightType , FontShortFamilyType\n | \"bold\" , FontShortSizeType , FontShortFamilyType\n | FontShortSizeType , \"/\" , FontShortLineHeightType , FontShortFamilyType\n | FontShortSizeType , FontShortFamilyType", valueType: "length", defaultValue: "icon", related: [], provenance: "assisted", truncated: false, trueCount: 34, shown: 34, assists: [{ type: "FontShortLineHeightType", samples: ["1.4"] }, { type: "FontShortSizeType", samples: ["24px", "16px"] }], values: [ v("caption", "font: caption;"), v("icon", "font: icon;"), v("menu", "font: menu;"), v("message-box", "font: message-box;"), v("small-caption", "font: small-caption;"), v("status-bar", "font: status-bar;"), v("italic small-caps bold condensed 24px/ 1.4 serif", "font: italic small-caps bold condensed 24px/ 1.4 serif;"), v("italic small-caps bold condensed 24px/ 1.4 sans-serif", "font: italic small-caps bold condensed 24px/ 1.4 sans-serif;"), v("italic small-caps bold condensed 16px/ 1.4 serif", "font: italic small-caps bold condensed 16px/ 1.4 serif;"), v("italic small-caps bold condensed 16px/ 1.4 sans-serif", "font: italic small-caps bold condensed 16px/ 1.4 sans-serif;"), v("small-caps bold 24px/ 1.4 serif", "font: small-caps bold 24px/ 1.4 serif;"), v("small-caps bold 24px/ 1.4 sans-serif", "font: small-caps bold 24px/ 1.4 sans-serif;"), v("small-caps bold 16px/ 1.4 serif", "font: small-caps bold 16px/ 1.4 serif;"), v("small-caps bold 16px/ 1.4 sans-serif", "font: small-caps bold 16px/ 1.4 sans-serif;"), v("italic lighter 24px serif", "font: italic lighter 24px serif;"), v("italic lighter 24px sans-serif", "font: italic lighter 24px sans-serif;"), v("italic lighter 16px serif", "font: italic lighter 16px serif;"), v("italic lighter 16px sans-serif", "font: italic lighter 16px sans-serif;"), v("oblique expanded 24px/ 1.4 serif", "font: oblique expanded 24px/ 1.4 serif;"), v("oblique expanded 24px/ 1.4 sans-serif", "font: oblique expanded 24px/ 1.4 sans-serif;"), v("oblique expanded 16px/ 1.4 serif", "font: oblique expanded 16px/ 1.4 serif;"), v("oblique expanded 16px/ 1.4 sans-serif", "font: oblique expanded 16px/ 1.4 sans-serif;"), v("bold 24px serif", "font: bold 24px serif;"), v("bold 24px sans-serif", "font: bold 24px sans-serif;"), v("bold 16px serif", "font: bold 16px serif;"), v("bold 16px sans-serif", "font: bold 16px sans-serif;"), v("24px/ 1.4 serif", "font: 24px/ 1.4 serif;"), v("24px/ 1.4 sans-serif", "font: 24px/ 1.4 sans-serif;"), v("16px/ 1.4 serif", "font: 16px/ 1.4 serif;"), v("16px/ 1.4 sans-serif", "font: 16px/ 1.4 sans-serif;"), v("24px serif", "font: 24px serif;"), v("24px sans-serif", "font: 24px sans-serif;"), v("16px serif", "font: 16px serif;"), v("16px sans-serif", "font: 16px sans-serif;"), ], }, { number: 104, name: "font-family", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efont-family\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "FontFamilyPropItem , { \",\" , FontFamilyPropItem }", ebnf: "font-family =\n FontFamilyPropItem , { \",\" , FontFamilyPropItem }", valueType: "keyword", defaultValue: "\"Aa\"", related: [], provenance: "assisted", truncated: false, trueCount: 16, shown: 16, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cstring\u003e", samples: ["\"Specimen\"", "\"Aa\""] }], values: [ v("\"Specimen\"", "font-family: \"Specimen\";"), v("\"Aa\"", "font-family: \"Aa\";"), v("my-ident", "font-family: my-ident;"), v("tag-a", "font-family: tag-a;"), v("generic(fangsong)", "font-family: generic(fangsong);"), v("serif", "font-family: serif;"), v("sans-serif", "font-family: sans-serif;"), v("system-ui", "font-family: system-ui;"), v("cursive", "font-family: cursive;"), v("fantasy", "font-family: fantasy;"), v("math", "font-family: math;"), v("monospace", "font-family: monospace;"), v("ui-serif", "font-family: ui-serif;"), v("ui-sans-serif", "font-family: ui-sans-serif;"), v("ui-monospace", "font-family: ui-monospace;"), v("ui-rounded", "font-family: ui-rounded;"), ], }, { number: 105, name: "font-feature-settings", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efont-feature-settings\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property controls advanced typographic features in OpenType fonts.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | FeatureTagValueType , { \",\" , FeatureTagValueType }", ebnf: "font-feature-settings =\n \"normal\" | FeatureTagValueType , { \",\" , FeatureTagValueType }", valueType: "keyword", defaultValue: "\"smcp\" 2", related: [], provenance: "assisted", truncated: false, trueCount: 49, shown: 49, assists: [{ type: "\u003cinteger\u003e", samples: ["2", "1", "3", "5", "4"] }, { type: "FeatureTagType", samples: ["\"smcp\"", "\"swsh\"", "\"frac\"", "\"liga\"", "\"onum\"", "\"tnum\""] }], values: [ v("normal", "font-feature-settings: normal;"), v("\"smcp\" 2", "font-feature-settings: \"smcp\" 2;"), v("\"smcp\" 1", "font-feature-settings: \"smcp\" 1;"), v("\"smcp\" 3", "font-feature-settings: \"smcp\" 3;"), v("\"smcp\" 5", "font-feature-settings: \"smcp\" 5;"), v("\"smcp\" 4", "font-feature-settings: \"smcp\" 4;"), v("\"smcp\" on", "font-feature-settings: \"smcp\" on;"), v("\"smcp\" off", "font-feature-settings: \"smcp\" off;"), v("\"smcp\"", "font-feature-settings: \"smcp\";"), v("\"swsh\" 2", "font-feature-settings: \"swsh\" 2;"), v("\"swsh\" 1", "font-feature-settings: \"swsh\" 1;"), v("\"swsh\" 3", "font-feature-settings: \"swsh\" 3;"), v("\"swsh\" 5", "font-feature-settings: \"swsh\" 5;"), v("\"swsh\" 4", "font-feature-settings: \"swsh\" 4;"), v("\"swsh\" on", "font-feature-settings: \"swsh\" on;"), v("\"swsh\" off", "font-feature-settings: \"swsh\" off;"), v("\"swsh\"", "font-feature-settings: \"swsh\";"), v("\"frac\" 2", "font-feature-settings: \"frac\" 2;"), v("\"frac\" 1", "font-feature-settings: \"frac\" 1;"), v("\"frac\" 3", "font-feature-settings: \"frac\" 3;"), v("\"frac\" 5", "font-feature-settings: \"frac\" 5;"), v("\"frac\" 4", "font-feature-settings: \"frac\" 4;"), v("\"frac\" on", "font-feature-settings: \"frac\" on;"), v("\"frac\" off", "font-feature-settings: \"frac\" off;"), v("\"frac\"", "font-feature-settings: \"frac\";"), v("\"liga\" 2", "font-feature-settings: \"liga\" 2;"), v("\"liga\" 1", "font-feature-settings: \"liga\" 1;"), v("\"liga\" 3", "font-feature-settings: \"liga\" 3;"), v("\"liga\" 5", "font-feature-settings: \"liga\" 5;"), v("\"liga\" 4", "font-feature-settings: \"liga\" 4;"), v("\"liga\" on", "font-feature-settings: \"liga\" on;"), v("\"liga\" off", "font-feature-settings: \"liga\" off;"), v("\"liga\"", "font-feature-settings: \"liga\";"), v("\"onum\" 2", "font-feature-settings: \"onum\" 2;"), v("\"onum\" 1", "font-feature-settings: \"onum\" 1;"), v("\"onum\" 3", "font-feature-settings: \"onum\" 3;"), v("\"onum\" 5", "font-feature-settings: \"onum\" 5;"), v("\"onum\" 4", "font-feature-settings: \"onum\" 4;"), v("\"onum\" on", "font-feature-settings: \"onum\" on;"), v("\"onum\" off", "font-feature-settings: \"onum\" off;"), v("\"onum\"", "font-feature-settings: \"onum\";"), v("\"tnum\" 2", "font-feature-settings: \"tnum\" 2;"), v("\"tnum\" 1", "font-feature-settings: \"tnum\" 1;"), v("\"tnum\" 3", "font-feature-settings: \"tnum\" 3;"), v("\"tnum\" 5", "font-feature-settings: \"tnum\" 5;"), v("\"tnum\" 4", "font-feature-settings: \"tnum\" 4;"), v("\"tnum\" on", "font-feature-settings: \"tnum\" on;"), v("\"tnum\" off", "font-feature-settings: \"tnum\" off;"), v("\"tnum\"", "font-feature-settings: \"tnum\";"), ], }, { number: 106, name: "font-kerning", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efont-kerning\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the use of the kerning information stored in a font.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"normal\" | \"none\"", ebnf: "font-kerning =\n \"auto\" | \"normal\" | \"none\"", valueType: "keyword", defaultValue: "normal", related: [], provenance: "pure", truncated: false, trueCount: 3, shown: 3, assists: [], values: [ v("auto", "font-kerning: auto;"), v("normal", "font-kerning: normal;"), v("none", "font-kerning: none;"), ], }, { number: 107, name: "font-language-override", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efont-language-override\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property controls the use of language-specific glyphs in a typeface.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | string_type", ebnf: "font-language-override =\n \"normal\" | string_type", valueType: "keyword", defaultValue: "\"Specimen\"", related: [], provenance: "assisted", truncated: false, trueCount: 3, shown: 3, assists: [{ type: "\u003cstring\u003e", samples: ["\"Specimen\"", "\"Aa\""] }], values: [ v("normal", "font-language-override: normal;"), v("\"Specimen\"", "font-language-override: \"Specimen\";"), v("\"Aa\"", "font-language-override: \"Aa\";"), ], }, { number: 108, name: "font-optical-sizing", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efont-optical-sizing\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets whether text rendering is optimized for viewing at different sizes.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"none\"", ebnf: "font-optical-sizing =\n \"auto\" | \"none\"", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("auto", "font-optical-sizing: auto;"), v("none", "font-optical-sizing: none;"), ], }, { number: 109, name: "font-palette", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efont-palette\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property allows specifying one of the many palettes contained in a \u003ca href=\"https://www.colorfonts.wtf/\" class=\"external\" target=\"_blank\" title=\"External link (opens in new tab)\"\u003ecolor font\u003c/a\u003e that a user agent may use for the font. Users can also override the values in a palette or create a new palette by using the \u003ca href=\"/en-US/docs/Web/CSS/Reference/At-rules/@font-palette-values\"\u003e\u003ccode\u003e@font-palette-values\u003c/code\u003e\u003c/a\u003e at-rule.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | \"light\" | \"dark\" | PaletteIdentifierType | PaletteMixFn", ebnf: "font-palette =\n \"normal\" | \"light\" | \"dark\" | PaletteIdentifierType | PaletteMixFn", valueType: "keyword", defaultValue: "light", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("normal", "font-palette: normal;"), v("light", "font-palette: light;"), v("dark", "font-palette: dark;"), v("--my-var", "font-palette: --my-var;"), v("palette-mix(in srgb, normal 30%, normal 15%)", "font-palette: palette-mix(in srgb, normal 30%, normal 15%);"), ], }, { number: 110, name: "font-size", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efont-size\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the size of the font. Changing the font size also updates the sizes of the font size-relative \u003ca href=\"/en-US/docs/Web/CSS/Reference/Values/length\"\u003e\u003ccode\u003e\u0026lt;length\u0026gt;\u003c/code\u003e\u003c/a\u003e units, such as \u003ccode\u003eem\u003c/code\u003e, \u003ccode\u003eex\u003c/code\u003e, and so forth.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "AbsoluteSizeType | RelativeSizeType | NonNegativeLengthPercentageType | \"math\"", ebnf: "font-size =\n AbsoluteSizeType | RelativeSizeType | NonNegativeLengthPercentageType | \"math\"", valueType: "keyword", defaultValue: "x-small", related: [], provenance: "assisted", truncated: false, trueCount: 29, shown: 29, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("xx-small", "font-size: xx-small;"), v("x-small", "font-size: x-small;"), v("small", "font-size: small;"), v("medium", "font-size: medium;"), v("large", "font-size: large;"), v("x-large", "font-size: x-large;"), v("xx-large", "font-size: xx-large;"), v("xxx-large", "font-size: xxx-large;"), v("smaller", "font-size: smaller;"), v("larger", "font-size: larger;"), v("24px", "font-size: 24px;"), v("48px", "font-size: 48px;"), v("8px", "font-size: 8px;"), v("16px", "font-size: 16px;"), v("64px", "font-size: 64px;"), v("50%", "font-size: 50%;"), v("80%", "font-size: 80%;"), v("30%", "font-size: 30%;"), v("65%", "font-size: 65%;"), v("15%", "font-size: 15%;"), v("100%", "font-size: 100%;"), v("calc(24px)", "font-size: calc(24px);"), v("clamp(24px, 2em, 48px)", "font-size: clamp(24px, 2em, 48px);"), v("min(24px)", "font-size: min(24px);"), v("max(24px)", "font-size: max(24px);"), v("round(nearest, 24px, 2em)", "font-size: round(nearest, 24px, 2em);"), v("abs(24px)", "font-size: abs(24px);"), v("env(my-ident, 48px)", "font-size: env(my-ident, 48px);"), v("math", "font-size: math;"), ], }, { number: 111, name: "font-size-adjust", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efont-size-adjust\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property provides a way to modify the size of lowercase letters relative to the size of uppercase letters, which defines the overall \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/font-size\"\u003e\u003ccode\u003efont-size\u003c/code\u003e\u003c/a\u003e. This property is useful for situations where font fallback can occur.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | VarFn | [ ( \"ex-height\" | \"cap-height\" | \"ch-width\" | \"ic-width\" | \"ic-height\" ) ] , ( \"from-font\" | NonNegativeNumberType )", ebnf: "font-size-adjust =\n \"none\" | VarFn | [ ( \"ex-height\" | \"cap-height\" | \"ch-width\" | \"ic-width\" | \"ic-height\" ) ] , ( \"from-font\" | NonNegativeNumberType )", valueType: "keyword", defaultValue: "var(--my-var, 0.5)", related: [], provenance: "assisted", truncated: false, trueCount: 38, shown: 38, assists: [{ type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber [0,∞]\u003e", samples: ["1", "2", "0.5", "0.75", "0.25"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("none", "font-size-adjust: none;"), v("var(--my-var, 0.5)", "font-size-adjust: var(--my-var, 0.5);"), v("ex-height from-font", "font-size-adjust: ex-height from-font;"), v("ex-height 1", "font-size-adjust: ex-height 1;"), v("ex-height 2", "font-size-adjust: ex-height 2;"), v("ex-height 0.5", "font-size-adjust: ex-height 0.5;"), v("ex-height 0.75", "font-size-adjust: ex-height 0.75;"), v("ex-height 0.25", "font-size-adjust: ex-height 0.25;"), v("cap-height from-font", "font-size-adjust: cap-height from-font;"), v("cap-height 1", "font-size-adjust: cap-height 1;"), v("cap-height 2", "font-size-adjust: cap-height 2;"), v("cap-height 0.5", "font-size-adjust: cap-height 0.5;"), v("cap-height 0.75", "font-size-adjust: cap-height 0.75;"), v("cap-height 0.25", "font-size-adjust: cap-height 0.25;"), v("ch-width from-font", "font-size-adjust: ch-width from-font;"), v("ch-width 1", "font-size-adjust: ch-width 1;"), v("ch-width 2", "font-size-adjust: ch-width 2;"), v("ch-width 0.5", "font-size-adjust: ch-width 0.5;"), v("ch-width 0.75", "font-size-adjust: ch-width 0.75;"), v("ch-width 0.25", "font-size-adjust: ch-width 0.25;"), v("ic-width from-font", "font-size-adjust: ic-width from-font;"), v("ic-width 1", "font-size-adjust: ic-width 1;"), v("ic-width 2", "font-size-adjust: ic-width 2;"), v("ic-width 0.5", "font-size-adjust: ic-width 0.5;"), v("ic-width 0.75", "font-size-adjust: ic-width 0.75;"), v("ic-width 0.25", "font-size-adjust: ic-width 0.25;"), v("ic-height from-font", "font-size-adjust: ic-height from-font;"), v("ic-height 1", "font-size-adjust: ic-height 1;"), v("ic-height 2", "font-size-adjust: ic-height 2;"), v("ic-height 0.5", "font-size-adjust: ic-height 0.5;"), v("ic-height 0.75", "font-size-adjust: ic-height 0.75;"), v("ic-height 0.25", "font-size-adjust: ic-height 0.25;"), v("from-font", "font-size-adjust: from-font;"), v("1", "font-size-adjust: 1;"), v("2", "font-size-adjust: 2;"), v("0.5", "font-size-adjust: 0.5;"), v("0.75", "font-size-adjust: 0.75;"), v("0.25", "font-size-adjust: 0.25;"), ], }, { number: 112, name: "font-smooth", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efont-smooth\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property controls the application of anti-aliasing when fonts are rendered.", experimental: false, nonstandard: true, deprecated: false, warning: "", syntax: "\"auto\" | \"never\" | \"always\" | AbsoluteSizeType | LengthType", ebnf: "font-smooth =\n \"auto\" | \"never\" | \"always\" | AbsoluteSizeType | LengthType", valueType: "keyword", defaultValue: "never", related: [], provenance: "assisted", truncated: false, trueCount: 16, shown: 16, assists: [{ type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("auto", "font-smooth: auto;"), v("never", "font-smooth: never;"), v("always", "font-smooth: always;"), v("xx-small", "font-smooth: xx-small;"), v("x-small", "font-smooth: x-small;"), v("small", "font-smooth: small;"), v("medium", "font-smooth: medium;"), v("large", "font-smooth: large;"), v("x-large", "font-smooth: x-large;"), v("xx-large", "font-smooth: xx-large;"), v("xxx-large", "font-smooth: xxx-large;"), v("24px", "font-smooth: 24px;"), v("48px", "font-smooth: 48px;"), v("8px", "font-smooth: 8px;"), v("16px", "font-smooth: 16px;"), v("64px", "font-smooth: 64px;"), ], }, { number: 113, name: "font-stretch", maturity: "modern", description: "\u003cstrong\u003eNote:\u003c/strong\u003e The \u003ccode\u003efont-stretch\u003c/code\u003e property was renamed to \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/font-width\"\u003e\u003ccode\u003efont-width\u003c/code\u003e\u003c/a\u003e in the \u003ca href=\"https://drafts.csswg.org/css-fonts/#font-stretch-prop\" class=\"external\" target=\"_blank\" title=\"External link (opens in new tab)\"\u003eCSS Fonts specification\u003c/a\u003e. To preserve compatibility, the specification retains \u003ccode\u003efont-stretch\u003c/code\u003e as a legacy alias for the \u003ccode\u003efont-width\u003c/code\u003e property.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | NonNegativePercentageType | \"ultra-condensed\" | \"extra-condensed\" | \"condensed\" | \"semi-condensed\" | \"semi-expanded\" | \"expanded\" | \"extra-expanded\" | \"ultra-expanded\"", ebnf: "font-stretch =\n \"normal\" | NonNegativePercentageType | \"ultra-condensed\" | \"extra-condensed\" | \"condensed\" | \"semi-condensed\" | \"semi-expanded\" | \"expanded\" | \"extra-expanded\" | \"ultra-expanded\"", valueType: "keyword", defaultValue: "50%", related: [], provenance: "assisted", truncated: false, trueCount: 15, shown: 15, assists: [{ type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("normal", "font-stretch: normal;"), v("50%", "font-stretch: 50%;"), v("80%", "font-stretch: 80%;"), v("30%", "font-stretch: 30%;"), v("65%", "font-stretch: 65%;"), v("15%", "font-stretch: 15%;"), v("100%", "font-stretch: 100%;"), v("ultra-condensed", "font-stretch: ultra-condensed;"), v("extra-condensed", "font-stretch: extra-condensed;"), v("condensed", "font-stretch: condensed;"), v("semi-condensed", "font-stretch: semi-condensed;"), v("semi-expanded", "font-stretch: semi-expanded;"), v("expanded", "font-stretch: expanded;"), v("extra-expanded", "font-stretch: extra-expanded;"), v("ultra-expanded", "font-stretch: ultra-expanded;"), ], }, { number: 114, name: "font-style", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efont-style\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets whether a font should be styled with a normal, italic, or oblique face from its \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/font-family\"\u003e\u003ccode\u003efont-family\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | \"italic\" | \"left\" | \"right\" | \"oblique\" , [ ObliqueAngleType ]", ebnf: "font-style =\n \"normal\" | \"italic\" | \"left\" | \"right\" | \"oblique\" , [ ObliqueAngleType ]", valueType: "angle", defaultValue: "italic", related: [], provenance: "assisted", truncated: false, trueCount: 10, shown: 10, assists: [{ type: "ObliqueAngleType", samples: ["14deg", "-14deg", "45deg", "-45deg", "90deg"] }], values: [ v("normal", "font-style: normal;"), v("italic", "font-style: italic;"), v("left", "font-style: left;"), v("right", "font-style: right;"), v("oblique 14deg", "font-style: oblique 14deg;"), v("oblique -14deg", "font-style: oblique -14deg;"), v("oblique 45deg", "font-style: oblique 45deg;"), v("oblique -45deg", "font-style: oblique -45deg;"), v("oblique 90deg", "font-style: oblique 90deg;"), v("oblique", "font-style: oblique;"), ], }, { number: 115, name: "font-synthesis", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efont-synthesis\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property lets you specify whether or not the browser may synthesize the bold, italic, small-caps, and/or subscript and superscript typefaces when they are missing in the specified font-family.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\"\n | \"weight\" , [ FontSynthesisBCD ]\n | \"style\" , [ FontSynthesisACD ]\n | \"small-caps\" , [ FontSynthesisABD ]\n | \"position\" , [ FontSynthesisABC ]", ebnf: "font-synthesis =\n \"none\"\n | \"weight\" , [ FontSynthesisBCD ]\n | \"style\" , [ FontSynthesisACD ]\n | \"small-caps\" , [ FontSynthesisABD ]\n | \"position\" , [ FontSynthesisABC ]", valueType: "keyword", defaultValue: "weight style small-caps position", related: [], provenance: "pure", truncated: false, trueCount: 65, shown: 50, assists: [], values: [ v("none", "font-synthesis: none;"), v("weight style small-caps position", "font-synthesis: weight style small-caps position;"), v("weight style small-caps", "font-synthesis: weight style small-caps;"), v("weight style position small-caps", "font-synthesis: weight style position small-caps;"), v("weight style position", "font-synthesis: weight style position;"), v("weight style", "font-synthesis: weight style;"), v("weight small-caps style position", "font-synthesis: weight small-caps style position;"), v("weight small-caps style", "font-synthesis: weight small-caps style;"), v("weight small-caps position style", "font-synthesis: weight small-caps position style;"), v("weight small-caps position", "font-synthesis: weight small-caps position;"), v("weight small-caps", "font-synthesis: weight small-caps;"), v("weight position style small-caps", "font-synthesis: weight position style small-caps;"), v("weight position style", "font-synthesis: weight position style;"), v("weight position small-caps style", "font-synthesis: weight position small-caps style;"), v("weight position small-caps", "font-synthesis: weight position small-caps;"), v("weight position", "font-synthesis: weight position;"), v("weight", "font-synthesis: weight;"), v("style weight small-caps position", "font-synthesis: style weight small-caps position;"), v("style weight small-caps", "font-synthesis: style weight small-caps;"), v("style weight position small-caps", "font-synthesis: style weight position small-caps;"), v("style weight position", "font-synthesis: style weight position;"), v("style weight", "font-synthesis: style weight;"), v("style small-caps weight position", "font-synthesis: style small-caps weight position;"), v("style small-caps weight", "font-synthesis: style small-caps weight;"), v("style small-caps position weight", "font-synthesis: style small-caps position weight;"), v("style small-caps position", "font-synthesis: style small-caps position;"), v("style small-caps", "font-synthesis: style small-caps;"), v("style position weight small-caps", "font-synthesis: style position weight small-caps;"), v("style position weight", "font-synthesis: style position weight;"), v("style position small-caps weight", "font-synthesis: style position small-caps weight;"), v("style position small-caps", "font-synthesis: style position small-caps;"), v("style position", "font-synthesis: style position;"), v("style", "font-synthesis: style;"), v("small-caps weight style position", "font-synthesis: small-caps weight style position;"), v("small-caps weight style", "font-synthesis: small-caps weight style;"), v("small-caps weight position style", "font-synthesis: small-caps weight position style;"), v("small-caps weight position", "font-synthesis: small-caps weight position;"), v("small-caps weight", "font-synthesis: small-caps weight;"), v("small-caps style weight position", "font-synthesis: small-caps style weight position;"), v("small-caps style weight", "font-synthesis: small-caps style weight;"), v("small-caps style position weight", "font-synthesis: small-caps style position weight;"), v("small-caps style position", "font-synthesis: small-caps style position;"), v("small-caps style", "font-synthesis: small-caps style;"), v("small-caps position weight style", "font-synthesis: small-caps position weight style;"), v("small-caps position weight", "font-synthesis: small-caps position weight;"), v("small-caps position style weight", "font-synthesis: small-caps position style weight;"), v("small-caps position style", "font-synthesis: small-caps position style;"), v("small-caps position", "font-synthesis: small-caps position;"), v("small-caps", "font-synthesis: small-caps;"), v("position weight style small-caps", "font-synthesis: position weight style small-caps;"), ], }, { number: 116, name: "font-synthesis-position", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efont-synthesis-position\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property lets you specify whether or not a browser may synthesize the subscript and superscript \"position\" typefaces when they are missing in a font family, while using \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/font-variant-position\"\u003e\u003ccode\u003efont-variant-position\u003c/code\u003e\u003c/a\u003e to set the positions.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"none\"", ebnf: "font-synthesis-position =\n \"auto\" | \"none\"", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("auto", "font-synthesis-position: auto;"), v("none", "font-synthesis-position: none;"), ], }, { number: 117, name: "font-synthesis-small-caps", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efont-synthesis-small-caps\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property lets you specify whether or not the browser may synthesize small-caps typeface when it is missing in a font family. Small-caps glyphs typically use the form of uppercase letters but are reduced to the size of lowercase letters.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"none\"", ebnf: "font-synthesis-small-caps =\n \"auto\" | \"none\"", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("auto", "font-synthesis-small-caps: auto;"), v("none", "font-synthesis-small-caps: none;"), ], }, { number: 118, name: "font-synthesis-style", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efont-synthesis-style\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property lets you specify whether or not the browser may synthesize the oblique typeface when it is missing in a font family.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"none\" | \"oblique-only\"", ebnf: "font-synthesis-style =\n \"auto\" | \"none\" | \"oblique-only\"", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: false, trueCount: 3, shown: 3, assists: [], values: [ v("auto", "font-synthesis-style: auto;"), v("none", "font-synthesis-style: none;"), v("oblique-only", "font-synthesis-style: oblique-only;"), ], }, { number: 119, name: "font-synthesis-weight", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efont-synthesis-weight\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property lets you specify whether or not the browser may synthesize the bold typeface when it is missing in a font family.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"none\"", ebnf: "font-synthesis-weight =\n \"auto\" | \"none\"", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("auto", "font-synthesis-weight: auto;"), v("none", "font-synthesis-weight: none;"), ], }, { number: 120, name: "font-variant", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efont-variant\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e allows you to set all the font variants for a font.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\"\n | \"none\"\n | CommonLigValuesType\n | ( \"small-caps\" | \"all-small-caps\" | \"petite-caps\" | \"titling-caps\" )\n | NumericFigureValuesType\n | NumericFractionValuesType\n | \"ordinal\"\n | \"slashed-zero\"\n | \"ruby\"\n | ( \"sub\" | \"super\" )\n | \"small-caps\" , \"ordinal\"\n | CommonLigValuesType , \"small-caps\" , NumericFractionValuesType", ebnf: "font-variant =\n \"normal\"\n | \"none\"\n | CommonLigValuesType\n | ( \"small-caps\" | \"all-small-caps\" | \"petite-caps\" | \"titling-caps\" )\n | NumericFigureValuesType\n | NumericFractionValuesType\n | \"ordinal\"\n | \"slashed-zero\"\n | \"ruby\"\n | ( \"sub\" | \"super\" )\n | \"small-caps\" , \"ordinal\"\n | CommonLigValuesType , \"small-caps\" , NumericFractionValuesType", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: false, trueCount: 22, shown: 22, assists: [], values: [ v("normal", "font-variant: normal;"), v("none", "font-variant: none;"), v("common-ligatures", "font-variant: common-ligatures;"), v("no-common-ligatures", "font-variant: no-common-ligatures;"), v("small-caps", "font-variant: small-caps;"), v("all-small-caps", "font-variant: all-small-caps;"), v("petite-caps", "font-variant: petite-caps;"), v("titling-caps", "font-variant: titling-caps;"), v("lining-nums", "font-variant: lining-nums;"), v("oldstyle-nums", "font-variant: oldstyle-nums;"), v("diagonal-fractions", "font-variant: diagonal-fractions;"), v("stacked-fractions", "font-variant: stacked-fractions;"), v("ordinal", "font-variant: ordinal;"), v("slashed-zero", "font-variant: slashed-zero;"), v("ruby", "font-variant: ruby;"), v("sub", "font-variant: sub;"), v("super", "font-variant: super;"), v("small-caps ordinal", "font-variant: small-caps ordinal;"), v("common-ligatures small-caps diagonal-fractions", "font-variant: common-ligatures small-caps diagonal-fractions;"), v("common-ligatures small-caps stacked-fractions", "font-variant: common-ligatures small-caps stacked-fractions;"), v("no-common-ligatures small-caps diagonal-fractions", "font-variant: no-common-ligatures small-caps diagonal-fractions;"), v("no-common-ligatures small-caps stacked-fractions", "font-variant: no-common-ligatures small-caps stacked-fractions;"), ], }, { number: 121, name: "font-variant-alternates", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efont-variant-alternates\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in \u003ca href=\"/en-US/docs/Web/CSS/Reference/At-rules/@font-feature-values\"\u003e\u003ccode\u003e@font-feature-values\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | FontVariantAlternatesPropItem , { FontVariantAlternatesPropItem }", ebnf: "font-variant-alternates =\n \"normal\" | FontVariantAlternatesPropItem , { FontVariantAlternatesPropItem }", valueType: "function", defaultValue: "historical-forms", related: [], provenance: "assisted", truncated: false, trueCount: 8, shown: 8, assists: [{ type: "\u003cident\u003e", samples: ["alpha", "beta"] }], values: [ v("normal", "font-variant-alternates: normal;"), v("historical-forms", "font-variant-alternates: historical-forms;"), v("stylistic(alpha)", "font-variant-alternates: stylistic(alpha);"), v("swash(alpha)", "font-variant-alternates: swash(alpha);"), v("ornaments(alpha)", "font-variant-alternates: ornaments(alpha);"), v("annotation(alpha)", "font-variant-alternates: annotation(alpha);"), v("styleset(alpha)", "font-variant-alternates: styleset(alpha);"), v("character-variant(alpha)", "font-variant-alternates: character-variant(alpha);"), ], }, { number: 122, name: "font-variant-caps", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efont-variant-caps\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property controls the use of alternate glyphs used for small or petite capitals or for titling.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | \"small-caps\" | \"all-small-caps\" | \"petite-caps\" | \"all-petite-caps\" | \"unicase\" | \"titling-caps\"", ebnf: "font-variant-caps =\n \"normal\" | \"small-caps\" | \"all-small-caps\" | \"petite-caps\" | \"all-petite-caps\" | \"unicase\" | \"titling-caps\"", valueType: "keyword", defaultValue: "small-caps", related: [], provenance: "pure", truncated: false, trueCount: 7, shown: 7, assists: [], values: [ v("normal", "font-variant-caps: normal;"), v("small-caps", "font-variant-caps: small-caps;"), v("all-small-caps", "font-variant-caps: all-small-caps;"), v("petite-caps", "font-variant-caps: petite-caps;"), v("all-petite-caps", "font-variant-caps: all-petite-caps;"), v("unicase", "font-variant-caps: unicase;"), v("titling-caps", "font-variant-caps: titling-caps;"), ], }, { number: 123, name: "font-variant-east-asian", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efont-variant-east-asian\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property controls the use of alternate glyphs for East Asian scripts, like Japanese and Chinese.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | ( [ EastAsianVariantValuesType ] , [ EastAsianWidthValuesType ] , [ \"ruby\" ] )", ebnf: "font-variant-east-asian =\n \"normal\" | ( [ EastAsianVariantValuesType ] , [ EastAsianWidthValuesType ] , [ \"ruby\" ] )", valueType: "keyword", defaultValue: "jis78 full-width ruby", related: [], provenance: "pure", truncated: false, trueCount: 42, shown: 42, assists: [], values: [ v("normal", "font-variant-east-asian: normal;"), v("jis78 full-width ruby", "font-variant-east-asian: jis78 full-width ruby;"), v("jis78 full-width", "font-variant-east-asian: jis78 full-width;"), v("jis78 proportional-width ruby", "font-variant-east-asian: jis78 proportional-width ruby;"), v("jis78 proportional-width", "font-variant-east-asian: jis78 proportional-width;"), v("jis78 ruby", "font-variant-east-asian: jis78 ruby;"), v("jis78", "font-variant-east-asian: jis78;"), v("jis83 full-width ruby", "font-variant-east-asian: jis83 full-width ruby;"), v("jis83 full-width", "font-variant-east-asian: jis83 full-width;"), v("jis83 proportional-width ruby", "font-variant-east-asian: jis83 proportional-width ruby;"), v("jis83 proportional-width", "font-variant-east-asian: jis83 proportional-width;"), v("jis83 ruby", "font-variant-east-asian: jis83 ruby;"), v("jis83", "font-variant-east-asian: jis83;"), v("jis90 full-width ruby", "font-variant-east-asian: jis90 full-width ruby;"), v("jis90 full-width", "font-variant-east-asian: jis90 full-width;"), v("jis90 proportional-width ruby", "font-variant-east-asian: jis90 proportional-width ruby;"), v("jis90 proportional-width", "font-variant-east-asian: jis90 proportional-width;"), v("jis90 ruby", "font-variant-east-asian: jis90 ruby;"), v("jis90", "font-variant-east-asian: jis90;"), v("jis04 full-width ruby", "font-variant-east-asian: jis04 full-width ruby;"), v("jis04 full-width", "font-variant-east-asian: jis04 full-width;"), v("jis04 proportional-width ruby", "font-variant-east-asian: jis04 proportional-width ruby;"), v("jis04 proportional-width", "font-variant-east-asian: jis04 proportional-width;"), v("jis04 ruby", "font-variant-east-asian: jis04 ruby;"), v("jis04", "font-variant-east-asian: jis04;"), v("simplified full-width ruby", "font-variant-east-asian: simplified full-width ruby;"), v("simplified full-width", "font-variant-east-asian: simplified full-width;"), v("simplified proportional-width ruby", "font-variant-east-asian: simplified proportional-width ruby;"), v("simplified proportional-width", "font-variant-east-asian: simplified proportional-width;"), v("simplified ruby", "font-variant-east-asian: simplified ruby;"), v("simplified", "font-variant-east-asian: simplified;"), v("traditional full-width ruby", "font-variant-east-asian: traditional full-width ruby;"), v("traditional full-width", "font-variant-east-asian: traditional full-width;"), v("traditional proportional-width ruby", "font-variant-east-asian: traditional proportional-width ruby;"), v("traditional proportional-width", "font-variant-east-asian: traditional proportional-width;"), v("traditional ruby", "font-variant-east-asian: traditional ruby;"), v("traditional", "font-variant-east-asian: traditional;"), v("full-width ruby", "font-variant-east-asian: full-width ruby;"), v("full-width", "font-variant-east-asian: full-width;"), v("proportional-width ruby", "font-variant-east-asian: proportional-width ruby;"), v("proportional-width", "font-variant-east-asian: proportional-width;"), v("ruby", "font-variant-east-asian: ruby;"), ], }, { number: 124, name: "font-variant-emoji", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efont-variant-emoji\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the default presentation style for displaying emojis.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | \"text\" | \"emoji\" | \"unicode\"", ebnf: "font-variant-emoji =\n \"normal\" | \"text\" | \"emoji\" | \"unicode\"", valueType: "keyword", defaultValue: "text", related: [], provenance: "pure", truncated: false, trueCount: 4, shown: 4, assists: [], values: [ v("normal", "font-variant-emoji: normal;"), v("text", "font-variant-emoji: text;"), v("emoji", "font-variant-emoji: emoji;"), v("unicode", "font-variant-emoji: unicode;"), ], }, { number: 125, name: "font-variant-ligatures", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efont-variant-ligatures\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property controls which \u003ca href=\"/en-US/docs/Glossary/Ligature\"\u003eligatures\u003c/a\u003e and contextual forms are used in the textual content of the elements it applies to. This leads to more harmonized forms in the resulting text.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | \"none\" | ( [ CommonLigValuesType ] , [ DiscretionaryLigValuesType ] , [ HistoricalLigValuesType ] , [ ContextualAltValuesType ] )", ebnf: "font-variant-ligatures =\n \"normal\" | \"none\" | ( [ CommonLigValuesType ] , [ DiscretionaryLigValuesType ] , [ HistoricalLigValuesType ] , [ ContextualAltValuesType ] )", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: true, trueCount: 82, shown: 50, assists: [], values: [ v("normal", "font-variant-ligatures: normal;"), v("none", "font-variant-ligatures: none;"), v("common-ligatures discretionary-ligatures historical-ligatures contextual", "font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;"), v("common-ligatures discretionary-ligatures historical-ligatures no-contextual", "font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures no-contextual;"), v("common-ligatures discretionary-ligatures historical-ligatures", "font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;"), v("common-ligatures discretionary-ligatures no-historical-ligatures contextual", "font-variant-ligatures: common-ligatures discretionary-ligatures no-historical-ligatures contextual;"), v("common-ligatures discretionary-ligatures no-historical-ligatures no-contextual", "font-variant-ligatures: common-ligatures discretionary-ligatures no-historical-ligatures no-contextual;"), v("common-ligatures discretionary-ligatures no-historical-ligatures", "font-variant-ligatures: common-ligatures discretionary-ligatures no-historical-ligatures;"), v("common-ligatures discretionary-ligatures contextual", "font-variant-ligatures: common-ligatures discretionary-ligatures contextual;"), v("common-ligatures discretionary-ligatures no-contextual", "font-variant-ligatures: common-ligatures discretionary-ligatures no-contextual;"), v("common-ligatures discretionary-ligatures", "font-variant-ligatures: common-ligatures discretionary-ligatures;"), v("common-ligatures no-discretionary-ligatures historical-ligatures contextual", "font-variant-ligatures: common-ligatures no-discretionary-ligatures historical-ligatures contextual;"), v("common-ligatures no-discretionary-ligatures historical-ligatures no-contextual", "font-variant-ligatures: common-ligatures no-discretionary-ligatures historical-ligatures no-contextual;"), v("common-ligatures no-discretionary-ligatures historical-ligatures", "font-variant-ligatures: common-ligatures no-discretionary-ligatures historical-ligatures;"), v("common-ligatures no-discretionary-ligatures no-historical-ligatures contextual", "font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures contextual;"), v("common-ligatures no-discretionary-ligatures no-historical-ligatures no-contextual", "font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures no-contextual;"), v("common-ligatures no-discretionary-ligatures no-historical-ligatures", "font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures;"), v("common-ligatures no-discretionary-ligatures contextual", "font-variant-ligatures: common-ligatures no-discretionary-ligatures contextual;"), v("common-ligatures no-discretionary-ligatures no-contextual", "font-variant-ligatures: common-ligatures no-discretionary-ligatures no-contextual;"), v("common-ligatures no-discretionary-ligatures", "font-variant-ligatures: common-ligatures no-discretionary-ligatures;"), v("common-ligatures historical-ligatures contextual", "font-variant-ligatures: common-ligatures historical-ligatures contextual;"), v("common-ligatures historical-ligatures no-contextual", "font-variant-ligatures: common-ligatures historical-ligatures no-contextual;"), v("common-ligatures historical-ligatures", "font-variant-ligatures: common-ligatures historical-ligatures;"), v("common-ligatures no-historical-ligatures contextual", "font-variant-ligatures: common-ligatures no-historical-ligatures contextual;"), v("common-ligatures no-historical-ligatures no-contextual", "font-variant-ligatures: common-ligatures no-historical-ligatures no-contextual;"), v("common-ligatures no-historical-ligatures", "font-variant-ligatures: common-ligatures no-historical-ligatures;"), v("common-ligatures contextual", "font-variant-ligatures: common-ligatures contextual;"), v("common-ligatures no-contextual", "font-variant-ligatures: common-ligatures no-contextual;"), v("common-ligatures", "font-variant-ligatures: common-ligatures;"), v("no-common-ligatures discretionary-ligatures historical-ligatures contextual", "font-variant-ligatures: no-common-ligatures discretionary-ligatures historical-ligatures contextual;"), v("no-common-ligatures discretionary-ligatures historical-ligatures no-contextual", "font-variant-ligatures: no-common-ligatures discretionary-ligatures historical-ligatures no-contextual;"), v("no-common-ligatures discretionary-ligatures historical-ligatures", "font-variant-ligatures: no-common-ligatures discretionary-ligatures historical-ligatures;"), v("no-common-ligatures discretionary-ligatures no-historical-ligatures contextual", "font-variant-ligatures: no-common-ligatures discretionary-ligatures no-historical-ligatures contextual;"), v("no-common-ligatures discretionary-ligatures no-historical-ligatures no-contextual", "font-variant-ligatures: no-common-ligatures discretionary-ligatures no-historical-ligatures no-contextual;"), v("no-common-ligatures discretionary-ligatures no-historical-ligatures", "font-variant-ligatures: no-common-ligatures discretionary-ligatures no-historical-ligatures;"), v("no-common-ligatures discretionary-ligatures contextual", "font-variant-ligatures: no-common-ligatures discretionary-ligatures contextual;"), v("no-common-ligatures discretionary-ligatures no-contextual", "font-variant-ligatures: no-common-ligatures discretionary-ligatures no-contextual;"), v("no-common-ligatures discretionary-ligatures", "font-variant-ligatures: no-common-ligatures discretionary-ligatures;"), v("no-common-ligatures no-discretionary-ligatures historical-ligatures contextual", "font-variant-ligatures: no-common-ligatures no-discretionary-ligatures historical-ligatures contextual;"), v("no-common-ligatures no-discretionary-ligatures historical-ligatures no-contextual", "font-variant-ligatures: no-common-ligatures no-discretionary-ligatures historical-ligatures no-contextual;"), v("no-common-ligatures no-discretionary-ligatures historical-ligatures", "font-variant-ligatures: no-common-ligatures no-discretionary-ligatures historical-ligatures;"), v("no-common-ligatures no-discretionary-ligatures no-historical-ligatures contextual", "font-variant-ligatures: no-common-ligatures no-discretionary-ligatures no-historical-ligatures contextual;"), v("no-common-ligatures no-discretionary-ligatures no-historical-ligatures no-contextual", "font-variant-ligatures: no-common-ligatures no-discretionary-ligatures no-historical-ligatures no-contextual;"), v("no-common-ligatures no-discretionary-ligatures no-historical-ligatures", "font-variant-ligatures: no-common-ligatures no-discretionary-ligatures no-historical-ligatures;"), v("no-common-ligatures no-discretionary-ligatures contextual", "font-variant-ligatures: no-common-ligatures no-discretionary-ligatures contextual;"), v("no-common-ligatures no-discretionary-ligatures no-contextual", "font-variant-ligatures: no-common-ligatures no-discretionary-ligatures no-contextual;"), v("no-common-ligatures no-discretionary-ligatures", "font-variant-ligatures: no-common-ligatures no-discretionary-ligatures;"), v("no-common-ligatures historical-ligatures contextual", "font-variant-ligatures: no-common-ligatures historical-ligatures contextual;"), v("no-common-ligatures historical-ligatures no-contextual", "font-variant-ligatures: no-common-ligatures historical-ligatures no-contextual;"), v("no-common-ligatures historical-ligatures", "font-variant-ligatures: no-common-ligatures historical-ligatures;"), ], }, { number: 126, name: "font-variant-numeric", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efont-variant-numeric\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\"\n | NumericFigureValuesType\n | NumericSpacingValuesType\n | NumericFractionValuesType\n | \"ordinal\"\n | \"slashed-zero\"\n | NumericFigureValuesType , NumericFractionValuesType , \"slashed-zero\"\n | NumericSpacingValuesType , \"ordinal\"", ebnf: "font-variant-numeric =\n \"normal\"\n | NumericFigureValuesType\n | NumericSpacingValuesType\n | NumericFractionValuesType\n | \"ordinal\"\n | \"slashed-zero\"\n | NumericFigureValuesType , NumericFractionValuesType , \"slashed-zero\"\n | NumericSpacingValuesType , \"ordinal\"", valueType: "keyword", defaultValue: "lining-nums", related: [], provenance: "pure", truncated: false, trueCount: 15, shown: 15, assists: [], values: [ v("normal", "font-variant-numeric: normal;"), v("lining-nums", "font-variant-numeric: lining-nums;"), v("oldstyle-nums", "font-variant-numeric: oldstyle-nums;"), v("proportional-nums", "font-variant-numeric: proportional-nums;"), v("tabular-nums", "font-variant-numeric: tabular-nums;"), v("diagonal-fractions", "font-variant-numeric: diagonal-fractions;"), v("stacked-fractions", "font-variant-numeric: stacked-fractions;"), v("ordinal", "font-variant-numeric: ordinal;"), v("slashed-zero", "font-variant-numeric: slashed-zero;"), v("lining-nums diagonal-fractions slashed-zero", "font-variant-numeric: lining-nums diagonal-fractions slashed-zero;"), v("lining-nums stacked-fractions slashed-zero", "font-variant-numeric: lining-nums stacked-fractions slashed-zero;"), v("oldstyle-nums diagonal-fractions slashed-zero", "font-variant-numeric: oldstyle-nums diagonal-fractions slashed-zero;"), v("oldstyle-nums stacked-fractions slashed-zero", "font-variant-numeric: oldstyle-nums stacked-fractions slashed-zero;"), v("proportional-nums ordinal", "font-variant-numeric: proportional-nums ordinal;"), v("tabular-nums ordinal", "font-variant-numeric: tabular-nums ordinal;"), ], }, { number: 127, name: "font-variant-position", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efont-variant-position\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property controls the use of alternate, smaller glyphs that are positioned as superscript or subscript.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | \"sub\" | \"super\"", ebnf: "font-variant-position =\n \"normal\" | \"sub\" | \"super\"", valueType: "keyword", defaultValue: "sub", related: [], provenance: "pure", truncated: false, trueCount: 3, shown: 3, assists: [], values: [ v("normal", "font-variant-position: normal;"), v("sub", "font-variant-position: sub;"), v("super", "font-variant-position: super;"), ], }, { number: 128, name: "font-variation-settings", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efont-variation-settings\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property provides low-level control over \u003ca href=\"/en-US/docs/Web/CSS/Guides/Fonts/Variable_fonts\"\u003evariable font\u003c/a\u003e characteristics by letting you specify the four letter axis names of the characteristics you want to vary along with their values.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | FontVariationSettingsPropItem , { \",\" , FontVariationSettingsPropItem }", ebnf: "font-variation-settings =\n \"normal\" | FontVariationSettingsPropItem , { \",\" , FontVariationSettingsPropItem }", valueType: "keyword", defaultValue: "\"wght\" 900", related: [], provenance: "assisted", truncated: false, trueCount: 17, shown: 17, assists: [{ type: "AxisTagType", samples: ["\"wght\"", "\"wdth\"", "\"opsz\"", "\"slnt\""] }, { type: "AxisValueType", samples: ["900", "100", "650", "25"] }], values: [ v("normal", "font-variation-settings: normal;"), v("\"wght\" 900", "font-variation-settings: \"wght\" 900;"), v("\"wght\" 100", "font-variation-settings: \"wght\" 100;"), v("\"wght\" 650", "font-variation-settings: \"wght\" 650;"), v("\"wght\" 25", "font-variation-settings: \"wght\" 25;"), v("\"wdth\" 900", "font-variation-settings: \"wdth\" 900;"), v("\"wdth\" 100", "font-variation-settings: \"wdth\" 100;"), v("\"wdth\" 650", "font-variation-settings: \"wdth\" 650;"), v("\"wdth\" 25", "font-variation-settings: \"wdth\" 25;"), v("\"opsz\" 900", "font-variation-settings: \"opsz\" 900;"), v("\"opsz\" 100", "font-variation-settings: \"opsz\" 100;"), v("\"opsz\" 650", "font-variation-settings: \"opsz\" 650;"), v("\"opsz\" 25", "font-variation-settings: \"opsz\" 25;"), v("\"slnt\" 900", "font-variation-settings: \"slnt\" 900;"), v("\"slnt\" 100", "font-variation-settings: \"slnt\" 100;"), v("\"slnt\" 650", "font-variation-settings: \"slnt\" 650;"), v("\"slnt\" 25", "font-variation-settings: \"slnt\" 25;"), ], }, { number: 129, name: "font-weight", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efont-weight\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the weight (or boldness) of the font. The weights available depend on the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/font-family\"\u003e\u003ccode\u003efont-family\u003c/code\u003e\u003c/a\u003e that is currently set.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "FontWeightAbsoluteType | \"bolder\" | \"lighter\"", ebnf: "font-weight =\n FontWeightAbsoluteType | \"bolder\" | \"lighter\"", valueType: "number", defaultValue: "bold", related: [], provenance: "assisted", truncated: false, trueCount: 9, shown: 9, assists: [{ type: "FontWeightNumberType", samples: ["900", "100", "400", "700", "300"] }], values: [ v("normal", "font-weight: normal;"), v("bold", "font-weight: bold;"), v("900", "font-weight: 900;"), v("100", "font-weight: 100;"), v("400", "font-weight: 400;"), v("700", "font-weight: 700;"), v("300", "font-weight: 300;"), v("bolder", "font-weight: bolder;"), v("lighter", "font-weight: lighter;"), ], }, { number: 130, name: "font-width", maturity: "modern", description: "\u003cstrong\u003eNote:\u003c/strong\u003e The \u003ccode\u003efont-width\u003c/code\u003e property is the modern replacement for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/font-stretch\"\u003e\u003ccode\u003efont-stretch\u003c/code\u003e\u003c/a\u003e, which is a legacy alias. While \u003ccode\u003efont-width\u003c/code\u003e is the specification's preferred name, \u003ccode\u003efont-stretch\u003c/code\u003e currently has broader browser support. Check the \u003ca href=\"#providing_a_font-stretch_fallback\"\u003efallback example\u003c/a\u003e and \u003ca href=\"#browser_compatibility\"\u003ebrowser compatibility\u003c/a\u003e table for details.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | PercentageType | \"ultra-condensed\" | \"extra-condensed\" | \"condensed\" | \"semi-condensed\" | \"semi-expanded\" | \"expanded\" | \"extra-expanded\" | \"ultra-expanded\"", ebnf: "font-width =\n \"normal\" | PercentageType | \"ultra-condensed\" | \"extra-condensed\" | \"condensed\" | \"semi-condensed\" | \"semi-expanded\" | \"expanded\" | \"extra-expanded\" | \"ultra-expanded\"", valueType: "keyword", defaultValue: "50%", related: [], provenance: "assisted", truncated: false, trueCount: 15, shown: 15, assists: [{ type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("normal", "font-width: normal;"), v("50%", "font-width: 50%;"), v("80%", "font-width: 80%;"), v("30%", "font-width: 30%;"), v("65%", "font-width: 65%;"), v("15%", "font-width: 15%;"), v("100%", "font-width: 100%;"), v("ultra-condensed", "font-width: ultra-condensed;"), v("extra-condensed", "font-width: extra-condensed;"), v("condensed", "font-width: condensed;"), v("semi-condensed", "font-width: semi-condensed;"), v("semi-expanded", "font-width: semi-expanded;"), v("expanded", "font-width: expanded;"), v("extra-expanded", "font-width: extra-expanded;"), v("ultra-expanded", "font-width: ultra-expanded;"), ], }, ], }, { id: "text-styling", sigil: "09", title: "Text Styling \u0026 Decoration", blurb: "Alignment, transformation, decoration and emphasis of text.", demo: "type", sampleKind: "text", group: "families", focus: false, gallery: false, count: 30, properties: [ { number: 131, name: "letter-spacing", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eletter-spacing\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the spacing between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of \u003ccode\u003eletter-spacing\u003c/code\u003e spread characters further apart, while negative values of \u003ccode\u003eletter-spacing\u003c/code\u003e bring characters closer together.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | LengthPercentageType", ebnf: "letter-spacing =\n \"normal\" | LengthPercentageType", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 20, shown: 20, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("normal", "letter-spacing: normal;"), v("24px", "letter-spacing: 24px;"), v("48px", "letter-spacing: 48px;"), v("8px", "letter-spacing: 8px;"), v("16px", "letter-spacing: 16px;"), v("64px", "letter-spacing: 64px;"), v("50%", "letter-spacing: 50%;"), v("80%", "letter-spacing: 80%;"), v("30%", "letter-spacing: 30%;"), v("65%", "letter-spacing: 65%;"), v("15%", "letter-spacing: 15%;"), v("100%", "letter-spacing: 100%;"), v("calc(24px)", "letter-spacing: calc(24px);"), v("clamp(24px, 2em, 48px)", "letter-spacing: clamp(24px, 2em, 48px);"), v("min(24px)", "letter-spacing: min(24px);"), v("max(24px)", "letter-spacing: max(24px);"), v("round(nearest, 24px, 2em)", "letter-spacing: round(nearest, 24px, 2em);"), v("abs(24px)", "letter-spacing: abs(24px);"), v("var(--my-var, 48px)", "letter-spacing: var(--my-var, 48px);"), v("env(my-ident, 48px)", "letter-spacing: env(my-ident, 48px);"), ], }, { number: 132, name: "text-align", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-align\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the horizontal alignment of the inline-level content inside a block element or table-cell box. This means it works like \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/vertical-align\"\u003e\u003ccode\u003evertical-align\u003c/code\u003e\u003c/a\u003e but in the horizontal direction.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"start\" | \"end\" | \"left\" | \"right\" | \"center\" | string_type | \"justify\" | \"match-parent\" | \"justify-all\"", ebnf: "text-align =\n \"start\" | \"end\" | \"left\" | \"right\" | \"center\" | string_type | \"justify\" | \"match-parent\" | \"justify-all\"", valueType: "keyword", defaultValue: "end", related: [], provenance: "assisted", truncated: false, trueCount: 10, shown: 10, assists: [{ type: "\u003cstring\u003e", samples: ["\"Specimen\"", "\"Aa\""] }], values: [ v("start", "text-align: start;"), v("end", "text-align: end;"), v("left", "text-align: left;"), v("right", "text-align: right;"), v("center", "text-align: center;"), v("\"Specimen\"", "text-align: \"Specimen\";"), v("\"Aa\"", "text-align: \"Aa\";"), v("justify", "text-align: justify;"), v("match-parent", "text-align: match-parent;"), v("justify-all", "text-align: justify-all;"), ], }, { number: 133, name: "text-align-last", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-align-last\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets how the last line of a block or a line, right before a forced line break, is aligned.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"start\" | \"end\" | \"left\" | \"right\" | \"center\" | \"justify\" | \"match-parent\"", ebnf: "text-align-last =\n \"auto\" | \"start\" | \"end\" | \"left\" | \"right\" | \"center\" | \"justify\" | \"match-parent\"", valueType: "keyword", defaultValue: "start", related: [], provenance: "pure", truncated: false, trueCount: 8, shown: 8, assists: [], values: [ v("auto", "text-align-last: auto;"), v("start", "text-align-last: start;"), v("end", "text-align-last: end;"), v("left", "text-align-last: left;"), v("right", "text-align-last: right;"), v("center", "text-align-last: center;"), v("justify", "text-align-last: justify;"), v("match-parent", "text-align-last: match-parent;"), ], }, { number: 134, name: "text-anchor", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-anchor\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property aligns a box containing a string of text where the wrapping area is determined from the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/inline-size\"\u003e\u003ccode\u003einline-size\u003c/code\u003e\u003c/a\u003e property, and the text is then placed relative to the anchor point of the element, which is defined using the \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/x\"\u003e\u003ccode\u003ex\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/y\"\u003e\u003ccode\u003ey\u003c/code\u003e\u003c/a\u003e (or \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/dx\"\u003e\u003ccode\u003edx\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/dy\"\u003e\u003ccode\u003edy\u003c/code\u003e\u003c/a\u003e) attributes. If present, the value of the CSS property overrides any value of the element's \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/text-anchor\"\u003e\u003ccode\u003etext-anchor\u003c/code\u003e\u003c/a\u003e attribute.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"start\" | \"middle\" | \"end\"", ebnf: "text-anchor =\n \"start\" | \"middle\" | \"end\"", valueType: "keyword", defaultValue: "middle", related: [], provenance: "pure", truncated: false, trueCount: 3, shown: 3, assists: [], values: [ v("start", "text-anchor: start;"), v("middle", "text-anchor: middle;"), v("end", "text-anchor: end;"), ], }, { number: 135, name: "text-autospace", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-autospace\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property allows you to specify the space applied between Chinese/Japanese/Korean (CJK) and non-CJK characters.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | AutospaceType | \"auto\"", ebnf: "text-autospace =\n \"normal\" | AutospaceType | \"auto\"", valueType: "keyword", defaultValue: "no-autospace", related: [], provenance: "pure", truncated: false, trueCount: 26, shown: 26, assists: [], values: [ v("normal", "text-autospace: normal;"), v("no-autospace", "text-autospace: no-autospace;"), v("ideograph-alpha ideograph-numeric punctuation insert", "text-autospace: ideograph-alpha ideograph-numeric punctuation insert;"), v("ideograph-alpha ideograph-numeric punctuation replace", "text-autospace: ideograph-alpha ideograph-numeric punctuation replace;"), v("ideograph-alpha ideograph-numeric punctuation", "text-autospace: ideograph-alpha ideograph-numeric punctuation;"), v("ideograph-alpha ideograph-numeric insert", "text-autospace: ideograph-alpha ideograph-numeric insert;"), v("ideograph-alpha ideograph-numeric replace", "text-autospace: ideograph-alpha ideograph-numeric replace;"), v("ideograph-alpha ideograph-numeric", "text-autospace: ideograph-alpha ideograph-numeric;"), v("ideograph-alpha punctuation insert", "text-autospace: ideograph-alpha punctuation insert;"), v("ideograph-alpha punctuation replace", "text-autospace: ideograph-alpha punctuation replace;"), v("ideograph-alpha punctuation", "text-autospace: ideograph-alpha punctuation;"), v("ideograph-alpha insert", "text-autospace: ideograph-alpha insert;"), v("ideograph-alpha replace", "text-autospace: ideograph-alpha replace;"), v("ideograph-alpha", "text-autospace: ideograph-alpha;"), v("ideograph-numeric punctuation insert", "text-autospace: ideograph-numeric punctuation insert;"), v("ideograph-numeric punctuation replace", "text-autospace: ideograph-numeric punctuation replace;"), v("ideograph-numeric punctuation", "text-autospace: ideograph-numeric punctuation;"), v("ideograph-numeric insert", "text-autospace: ideograph-numeric insert;"), v("ideograph-numeric replace", "text-autospace: ideograph-numeric replace;"), v("ideograph-numeric", "text-autospace: ideograph-numeric;"), v("punctuation insert", "text-autospace: punctuation insert;"), v("punctuation replace", "text-autospace: punctuation replace;"), v("punctuation", "text-autospace: punctuation;"), v("insert", "text-autospace: insert;"), v("replace", "text-autospace: replace;"), v("auto", "text-autospace: auto;"), ], }, { number: 136, name: "text-box", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-box\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property is a shorthand that corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-box-trim\"\u003e\u003ccode\u003etext-box-trim\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-box-edge\"\u003e\u003ccode\u003etext-box-edge\u003c/code\u003e\u003c/a\u003e properties, which together specify the amount of space to trim from the block-start edge and block-end edge of a text element's block container.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | [ TextBoxTrimProp ] , [ TextBoxEdgeProp ]", ebnf: "text-box =\n \"normal\" | [ TextBoxTrimProp ] , [ TextBoxEdgeProp ]", valueType: "keyword", defaultValue: "none auto", related: [], provenance: "pure", truncated: true, trueCount: 125, shown: 50, assists: [], values: [ v("normal", "text-box: normal;"), v("none auto", "text-box: none auto;"), v("none text", "text-box: none text;"), v("none ideographic", "text-box: none ideographic;"), v("none ideographic-ink", "text-box: none ideographic-ink;"), v("none text text", "text-box: none text text;"), v("none text ideographic", "text-box: none text ideographic;"), v("none text ideographic-ink", "text-box: none text ideographic-ink;"), v("none text alphabetic", "text-box: none text alphabetic;"), v("none ideographic text", "text-box: none ideographic text;"), v("none ideographic ideographic", "text-box: none ideographic ideographic;"), v("none ideographic ideographic-ink", "text-box: none ideographic ideographic-ink;"), v("none ideographic alphabetic", "text-box: none ideographic alphabetic;"), v("none ideographic-ink text", "text-box: none ideographic-ink text;"), v("none ideographic-ink ideographic", "text-box: none ideographic-ink ideographic;"), v("none ideographic-ink ideographic-ink", "text-box: none ideographic-ink ideographic-ink;"), v("none ideographic-ink alphabetic", "text-box: none ideographic-ink alphabetic;"), v("none cap text", "text-box: none cap text;"), v("none cap ideographic", "text-box: none cap ideographic;"), v("none cap ideographic-ink", "text-box: none cap ideographic-ink;"), v("none cap alphabetic", "text-box: none cap alphabetic;"), v("none ex text", "text-box: none ex text;"), v("none ex ideographic", "text-box: none ex ideographic;"), v("none ex ideographic-ink", "text-box: none ex ideographic-ink;"), v("none ex alphabetic", "text-box: none ex alphabetic;"), v("none", "text-box: none;"), v("trim-start auto", "text-box: trim-start auto;"), v("trim-start text", "text-box: trim-start text;"), v("trim-start ideographic", "text-box: trim-start ideographic;"), v("trim-start ideographic-ink", "text-box: trim-start ideographic-ink;"), v("trim-start text text", "text-box: trim-start text text;"), v("trim-start text ideographic", "text-box: trim-start text ideographic;"), v("trim-start text ideographic-ink", "text-box: trim-start text ideographic-ink;"), v("trim-start text alphabetic", "text-box: trim-start text alphabetic;"), v("trim-start ideographic text", "text-box: trim-start ideographic text;"), v("trim-start ideographic ideographic", "text-box: trim-start ideographic ideographic;"), v("trim-start ideographic ideographic-ink", "text-box: trim-start ideographic ideographic-ink;"), v("trim-start ideographic alphabetic", "text-box: trim-start ideographic alphabetic;"), v("trim-start ideographic-ink text", "text-box: trim-start ideographic-ink text;"), v("trim-start ideographic-ink ideographic", "text-box: trim-start ideographic-ink ideographic;"), v("trim-start ideographic-ink ideographic-ink", "text-box: trim-start ideographic-ink ideographic-ink;"), v("trim-start ideographic-ink alphabetic", "text-box: trim-start ideographic-ink alphabetic;"), v("trim-start cap text", "text-box: trim-start cap text;"), v("trim-start cap ideographic", "text-box: trim-start cap ideographic;"), v("trim-start cap ideographic-ink", "text-box: trim-start cap ideographic-ink;"), v("trim-start cap alphabetic", "text-box: trim-start cap alphabetic;"), v("trim-start ex text", "text-box: trim-start ex text;"), v("trim-start ex ideographic", "text-box: trim-start ex ideographic;"), v("trim-start ex ideographic-ink", "text-box: trim-start ex ideographic-ink;"), v("trim-start ex alphabetic", "text-box: trim-start ex alphabetic;"), ], }, { number: 137, name: "text-box-edge", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-box-edge\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies an amount of space to trim from a text element's block container.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | TextEdgeType", ebnf: "text-box-edge =\n \"auto\" | TextEdgeType", valueType: "keyword", defaultValue: "text", related: [], provenance: "pure", truncated: false, trueCount: 24, shown: 24, assists: [], values: [ v("auto", "text-box-edge: auto;"), v("text", "text-box-edge: text;"), v("ideographic", "text-box-edge: ideographic;"), v("ideographic-ink", "text-box-edge: ideographic-ink;"), v("text text", "text-box-edge: text text;"), v("text ideographic", "text-box-edge: text ideographic;"), v("text ideographic-ink", "text-box-edge: text ideographic-ink;"), v("text alphabetic", "text-box-edge: text alphabetic;"), v("ideographic text", "text-box-edge: ideographic text;"), v("ideographic ideographic", "text-box-edge: ideographic ideographic;"), v("ideographic ideographic-ink", "text-box-edge: ideographic ideographic-ink;"), v("ideographic alphabetic", "text-box-edge: ideographic alphabetic;"), v("ideographic-ink text", "text-box-edge: ideographic-ink text;"), v("ideographic-ink ideographic", "text-box-edge: ideographic-ink ideographic;"), v("ideographic-ink ideographic-ink", "text-box-edge: ideographic-ink ideographic-ink;"), v("ideographic-ink alphabetic", "text-box-edge: ideographic-ink alphabetic;"), v("cap text", "text-box-edge: cap text;"), v("cap ideographic", "text-box-edge: cap ideographic;"), v("cap ideographic-ink", "text-box-edge: cap ideographic-ink;"), v("cap alphabetic", "text-box-edge: cap alphabetic;"), v("ex text", "text-box-edge: ex text;"), v("ex ideographic", "text-box-edge: ex ideographic;"), v("ex ideographic-ink", "text-box-edge: ex ideographic-ink;"), v("ex alphabetic", "text-box-edge: ex alphabetic;"), ], }, { number: 138, name: "text-box-trim", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-box-trim\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies which of the over and under edges of text content to trim from a text element's block container.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | \"trim-start\" | \"trim-end\" | \"trim-both\"", ebnf: "text-box-trim =\n \"none\" | \"trim-start\" | \"trim-end\" | \"trim-both\"", valueType: "keyword", defaultValue: "trim-start", related: [], provenance: "pure", truncated: false, trueCount: 4, shown: 4, assists: [], values: [ v("none", "text-box-trim: none;"), v("trim-start", "text-box-trim: trim-start;"), v("trim-end", "text-box-trim: trim-end;"), v("trim-both", "text-box-trim: trim-both;"), ], }, { number: 139, name: "text-decoration", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-decoration\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the appearance of decorative lines on text. It is a shorthand for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-decoration-line\"\u003e\u003ccode\u003etext-decoration-line\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-decoration-color\"\u003e\u003ccode\u003etext-decoration-color\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-decoration-style\"\u003e\u003ccode\u003etext-decoration-style\u003c/code\u003e\u003c/a\u003e, and the newer \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-decoration-thickness\"\u003e\u003ccode\u003etext-decoration-thickness\u003c/code\u003e\u003c/a\u003e property.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "TextDecorationLineProp , [ TextDecorationBCD ]\n | TextDecorationThicknessProp , [ TextDecorationACD ]\n | TextDecorationStyleProp , [ TextDecorationABD ]\n | TextDecorationColorProp , [ TextDecorationABC ]", ebnf: "text-decoration =\n TextDecorationLineProp , [ TextDecorationBCD ]\n | TextDecorationThicknessProp , [ TextDecorationACD ]\n | TextDecorationStyleProp , [ TextDecorationABD ]\n | TextDecorationColorProp , [ TextDecorationABC ]", valueType: "keyword", defaultValue: "underline auto solid #2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 320, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("underline auto solid #c5483c", "text-decoration: underline auto solid #c5483c;"), v("underline auto solid #2f5fd0", "text-decoration: underline auto solid #2f5fd0;"), v("underline auto solid rgb(50%, 80%, 30%, 0.75)", "text-decoration: underline auto solid rgb(50%, 80%, 30%, 0.75);"), v("underline auto solid rgb(1, 0.5, 2, 0.75)", "text-decoration: underline auto solid rgb(1, 0.5, 2, 0.75);"), v("underline auto solid rgb(from #c5483c 80% 65% 100%/ 2)", "text-decoration: underline auto solid rgb(from #c5483c 80% 65% 100%/ 2);"), v("underline auto solid rgba(50%, 80%, 30%, 0.75)", "text-decoration: underline auto solid rgba(50%, 80%, 30%, 0.75);"), v("underline auto solid rgba(1, 0.5, 2, 0.75)", "text-decoration: underline auto solid rgba(1, 0.5, 2, 0.75);"), v("underline auto solid rgba(from #c5483c 80% 65% 100%/ 2)", "text-decoration: underline auto solid rgba(from #c5483c 80% 65% 100%/ 2);"), v("underline auto solid hsl(45deg, 30%, 65%, 0.25)", "text-decoration: underline auto solid hsl(45deg, 30%, 65%, 0.25);"), v("underline auto solid hsl(from #c5483c 135deg 65% 100%/ 2)", "text-decoration: underline auto solid hsl(from #c5483c 135deg 65% 100%/ 2);"), v("underline auto solid hsla(45deg, 30%, 65%, 0.25)", "text-decoration: underline auto solid hsla(45deg, 30%, 65%, 0.25);"), v("underline auto solid hsla(from #c5483c 135deg 65% 100%/ 2)", "text-decoration: underline auto solid hsla(from #c5483c 135deg 65% 100%/ 2);"), v("underline auto solid hwb(from #c5483c 135deg 65% 100%/ 2)", "text-decoration: underline auto solid hwb(from #c5483c 135deg 65% 100%/ 2);"), v("underline auto solid lab(from #c5483c 80% 15% 80%/ 1)", "text-decoration: underline auto solid lab(from #c5483c 80% 15% 80%/ 1);"), v("underline auto solid lch(from #c5483c 80% 15% 250deg/ 1)", "text-decoration: underline auto solid lch(from #c5483c 80% 15% 250deg/ 1);"), v("underline auto solid oklab(from #c5483c 80% 15% 80%/ 1)", "text-decoration: underline auto solid oklab(from #c5483c 80% 15% 80%/ 1);"), v("underline auto solid oklch(from #c5483c 80% 15% 250deg/ 1)", "text-decoration: underline auto solid oklch(from #c5483c 80% 15% 250deg/ 1);"), v("underline auto solid ictcp(from #c5483c 80% 15% 80%/ 1)", "text-decoration: underline auto solid ictcp(from #c5483c 80% 15% 80%/ 1);"), v("underline auto solid jzazbz(from #c5483c 80% 15% 80%/ 1)", "text-decoration: underline auto solid jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("underline auto solid jzczhz(from #c5483c 80% 15% 250deg/ 1)", "text-decoration: underline auto solid jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("underline auto solid alpha(from #c5483c/ 0.5)", "text-decoration: underline auto solid alpha(from #c5483c/ 0.5);"), v("underline auto solid color(from #c5483c --my-var 2/ 0.5)", "text-decoration: underline auto solid color(from #c5483c --my-var 2/ 0.5);"), v("underline auto solid color-hdr(#c5483c 0.5, #c5483c 0.75)", "text-decoration: underline auto solid color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("underline auto solid aliceblue", "text-decoration: underline auto solid aliceblue;"), v("underline auto solid antiquewhite", "text-decoration: underline auto solid antiquewhite;"), v("underline auto solid aqua", "text-decoration: underline auto solid aqua;"), v("underline auto solid aquamarine", "text-decoration: underline auto solid aquamarine;"), v("underline auto solid azure", "text-decoration: underline auto solid azure;"), v("underline auto solid beige", "text-decoration: underline auto solid beige;"), v("underline auto solid bisque", "text-decoration: underline auto solid bisque;"), v("underline auto solid black", "text-decoration: underline auto solid black;"), v("underline auto solid blanchedalmond", "text-decoration: underline auto solid blanchedalmond;"), v("underline auto solid blue", "text-decoration: underline auto solid blue;"), v("underline auto solid blueviolet", "text-decoration: underline auto solid blueviolet;"), v("underline auto solid brown", "text-decoration: underline auto solid brown;"), v("underline auto solid burlywood", "text-decoration: underline auto solid burlywood;"), v("underline auto solid cadetblue", "text-decoration: underline auto solid cadetblue;"), v("underline auto solid chartreuse", "text-decoration: underline auto solid chartreuse;"), v("underline auto solid chocolate", "text-decoration: underline auto solid chocolate;"), v("underline auto solid coral", "text-decoration: underline auto solid coral;"), v("underline auto solid cornflowerblue", "text-decoration: underline auto solid cornflowerblue;"), v("underline auto solid cornsilk", "text-decoration: underline auto solid cornsilk;"), v("underline auto solid crimson", "text-decoration: underline auto solid crimson;"), v("underline auto solid cyan", "text-decoration: underline auto solid cyan;"), v("underline auto solid darkblue", "text-decoration: underline auto solid darkblue;"), v("underline auto solid darkcyan", "text-decoration: underline auto solid darkcyan;"), v("underline auto solid darkgoldenrod", "text-decoration: underline auto solid darkgoldenrod;"), v("underline auto solid darkgray", "text-decoration: underline auto solid darkgray;"), v("underline auto solid darkgreen", "text-decoration: underline auto solid darkgreen;"), v("underline auto solid darkgrey", "text-decoration: underline auto solid darkgrey;"), ], }, { number: 140, name: "text-decoration-color", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-decoration-color\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the color of decorations added to text by \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-decoration-line\"\u003e\u003ccode\u003etext-decoration-line\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ColorType", ebnf: "text-decoration-color =\n ColorType", valueType: "keyword", defaultValue: "#2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("#c5483c", "text-decoration-color: #c5483c;"), v("#2f5fd0", "text-decoration-color: #2f5fd0;"), v("rgb(50%, 80%, 30%, 0.75)", "text-decoration-color: rgb(50%, 80%, 30%, 0.75);"), v("rgb(1, 0.5, 2, 0.75)", "text-decoration-color: rgb(1, 0.5, 2, 0.75);"), v("rgb(from #c5483c 80% 65% 100%/ 2)", "text-decoration-color: rgb(from #c5483c 80% 65% 100%/ 2);"), v("rgba(50%, 80%, 30%, 0.75)", "text-decoration-color: rgba(50%, 80%, 30%, 0.75);"), v("rgba(1, 0.5, 2, 0.75)", "text-decoration-color: rgba(1, 0.5, 2, 0.75);"), v("rgba(from #c5483c 80% 65% 100%/ 2)", "text-decoration-color: rgba(from #c5483c 80% 65% 100%/ 2);"), v("hsl(45deg, 30%, 65%, 0.25)", "text-decoration-color: hsl(45deg, 30%, 65%, 0.25);"), v("hsl(from #c5483c 135deg 65% 100%/ 2)", "text-decoration-color: hsl(from #c5483c 135deg 65% 100%/ 2);"), v("hsla(45deg, 30%, 65%, 0.25)", "text-decoration-color: hsla(45deg, 30%, 65%, 0.25);"), v("hsla(from #c5483c 135deg 65% 100%/ 2)", "text-decoration-color: hsla(from #c5483c 135deg 65% 100%/ 2);"), v("hwb(from #c5483c 135deg 65% 100%/ 2)", "text-decoration-color: hwb(from #c5483c 135deg 65% 100%/ 2);"), v("lab(from #c5483c 80% 15% 80%/ 1)", "text-decoration-color: lab(from #c5483c 80% 15% 80%/ 1);"), v("lch(from #c5483c 80% 15% 250deg/ 1)", "text-decoration-color: lch(from #c5483c 80% 15% 250deg/ 1);"), v("oklab(from #c5483c 80% 15% 80%/ 1)", "text-decoration-color: oklab(from #c5483c 80% 15% 80%/ 1);"), v("oklch(from #c5483c 80% 15% 250deg/ 1)", "text-decoration-color: oklch(from #c5483c 80% 15% 250deg/ 1);"), v("ictcp(from #c5483c 80% 15% 80%/ 1)", "text-decoration-color: ictcp(from #c5483c 80% 15% 80%/ 1);"), v("jzazbz(from #c5483c 80% 15% 80%/ 1)", "text-decoration-color: jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("jzczhz(from #c5483c 80% 15% 250deg/ 1)", "text-decoration-color: jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("alpha(from #c5483c/ 0.5)", "text-decoration-color: alpha(from #c5483c/ 0.5);"), v("color(from #c5483c --my-var 2/ 0.5)", "text-decoration-color: color(from #c5483c --my-var 2/ 0.5);"), v("color-hdr(#c5483c 0.5, #c5483c 0.75)", "text-decoration-color: color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("aliceblue", "text-decoration-color: aliceblue;"), v("antiquewhite", "text-decoration-color: antiquewhite;"), v("aqua", "text-decoration-color: aqua;"), v("aquamarine", "text-decoration-color: aquamarine;"), v("azure", "text-decoration-color: azure;"), v("beige", "text-decoration-color: beige;"), v("bisque", "text-decoration-color: bisque;"), v("black", "text-decoration-color: black;"), v("blanchedalmond", "text-decoration-color: blanchedalmond;"), v("blue", "text-decoration-color: blue;"), v("blueviolet", "text-decoration-color: blueviolet;"), v("brown", "text-decoration-color: brown;"), v("burlywood", "text-decoration-color: burlywood;"), v("cadetblue", "text-decoration-color: cadetblue;"), v("chartreuse", "text-decoration-color: chartreuse;"), v("chocolate", "text-decoration-color: chocolate;"), v("coral", "text-decoration-color: coral;"), v("cornflowerblue", "text-decoration-color: cornflowerblue;"), v("cornsilk", "text-decoration-color: cornsilk;"), v("crimson", "text-decoration-color: crimson;"), v("cyan", "text-decoration-color: cyan;"), v("darkblue", "text-decoration-color: darkblue;"), v("darkcyan", "text-decoration-color: darkcyan;"), v("darkgoldenrod", "text-decoration-color: darkgoldenrod;"), v("darkgray", "text-decoration-color: darkgray;"), v("darkgreen", "text-decoration-color: darkgreen;"), v("darkgrey", "text-decoration-color: darkgrey;"), ], }, { number: 141, name: "text-decoration-inset", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-decoration-inset\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property enables adjusting the start and end points of an element's text decoration so it can be shortened, lengthened, or have its position shifted with respect to the rendered text.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "LengthType , [ LengthType ] | \"auto\"", ebnf: "text-decoration-inset =\n LengthType , [ LengthType ] | \"auto\"", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 6, shown: 6, assists: [{ type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "text-decoration-inset: 24px;"), v("48px", "text-decoration-inset: 48px;"), v("8px", "text-decoration-inset: 8px;"), v("16px", "text-decoration-inset: 16px;"), v("64px", "text-decoration-inset: 64px;"), v("auto", "text-decoration-inset: auto;"), ], }, { number: 142, name: "text-decoration-line", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-decoration-line\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the kind of decoration that is used on text in an element, such as an underline or overline.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "TextDecorationLineKeyword , { TextDecorationLineKeyword } | \"none\" | \"spelling-error\" | \"grammar-error\"", ebnf: "text-decoration-line =\n TextDecorationLineKeyword , { TextDecorationLineKeyword } | \"none\" | \"spelling-error\" | \"grammar-error\"", valueType: "keyword", defaultValue: "overline", related: [], provenance: "pure", truncated: false, trueCount: 7, shown: 7, assists: [], values: [ v("underline", "text-decoration-line: underline;"), v("overline", "text-decoration-line: overline;"), v("line-through", "text-decoration-line: line-through;"), v("blink", "text-decoration-line: blink;"), v("none", "text-decoration-line: none;"), v("spelling-error", "text-decoration-line: spelling-error;"), v("grammar-error", "text-decoration-line: grammar-error;"), ], }, { number: 143, name: "text-decoration-skip", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-decoration-skip\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets what parts of an element's content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.", experimental: false, nonstandard: false, deprecated: true, warning: "", syntax: "\"none\" | \"auto\"", ebnf: "text-decoration-skip =\n \"none\" | \"auto\"", valueType: "keyword", defaultValue: "auto", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("none", "text-decoration-skip: none;"), v("auto", "text-decoration-skip: auto;"), ], }, { number: 144, name: "text-decoration-skip-ink", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-decoration-skip-ink\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies how overlines and underlines are drawn when they pass over glyph ascenders and descenders.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"none\" | \"all\"", ebnf: "text-decoration-skip-ink =\n \"auto\" | \"none\" | \"all\"", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: false, trueCount: 3, shown: 3, assists: [], values: [ v("auto", "text-decoration-skip-ink: auto;"), v("none", "text-decoration-skip-ink: none;"), v("all", "text-decoration-skip-ink: all;"), ], }, { number: 145, name: "text-decoration-style", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-decoration-style\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the style of the lines specified by \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-decoration-line\"\u003e\u003ccode\u003etext-decoration-line\u003c/code\u003e\u003c/a\u003e. The style applies to all lines that are set with \u003ccode\u003etext-decoration-line\u003c/code\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"solid\" | \"double\" | \"dotted\" | \"dashed\" | \"wavy\"", ebnf: "text-decoration-style =\n \"solid\" | \"double\" | \"dotted\" | \"dashed\" | \"wavy\"", valueType: "keyword", defaultValue: "double", related: [], provenance: "pure", truncated: false, trueCount: 5, shown: 5, assists: [], values: [ v("solid", "text-decoration-style: solid;"), v("double", "text-decoration-style: double;"), v("dotted", "text-decoration-style: dotted;"), v("dashed", "text-decoration-style: dashed;"), v("wavy", "text-decoration-style: wavy;"), ], }, { number: 146, name: "text-decoration-thickness", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-decoration-thickness\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the stroke thickness of the decoration line that is used on text in an element, such as a line-through, underline, or overline.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"from-font\" | LengthPercentageType | LineWidthType", ebnf: "text-decoration-thickness =\n \"auto\" | \"from-font\" | LengthPercentageType | LineWidthType", valueType: "length", defaultValue: "from-font", related: [], provenance: "assisted", truncated: false, trueCount: 24, shown: 24, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "text-decoration-thickness: auto;"), v("from-font", "text-decoration-thickness: from-font;"), v("24px", "text-decoration-thickness: 24px;"), v("48px", "text-decoration-thickness: 48px;"), v("8px", "text-decoration-thickness: 8px;"), v("16px", "text-decoration-thickness: 16px;"), v("64px", "text-decoration-thickness: 64px;"), v("50%", "text-decoration-thickness: 50%;"), v("80%", "text-decoration-thickness: 80%;"), v("30%", "text-decoration-thickness: 30%;"), v("65%", "text-decoration-thickness: 65%;"), v("15%", "text-decoration-thickness: 15%;"), v("100%", "text-decoration-thickness: 100%;"), v("calc(24px)", "text-decoration-thickness: calc(24px);"), v("clamp(24px, 2em, 48px)", "text-decoration-thickness: clamp(24px, 2em, 48px);"), v("min(24px)", "text-decoration-thickness: min(24px);"), v("max(24px)", "text-decoration-thickness: max(24px);"), v("round(nearest, 24px, 2em)", "text-decoration-thickness: round(nearest, 24px, 2em);"), v("abs(24px)", "text-decoration-thickness: abs(24px);"), v("var(--my-var, 48px)", "text-decoration-thickness: var(--my-var, 48px);"), v("env(my-ident, 48px)", "text-decoration-thickness: env(my-ident, 48px);"), v("thin", "text-decoration-thickness: thin;"), v("medium", "text-decoration-thickness: medium;"), v("thick", "text-decoration-thickness: thick;"), ], }, { number: 147, name: "text-emphasis", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-emphasis\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property applies emphasis marks to text (except spaces and control characters). It is a \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand\u003c/a\u003e for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-emphasis-style\"\u003e\u003ccode\u003etext-emphasis-style\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-emphasis-color\"\u003e\u003ccode\u003etext-emphasis-color\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "TextEmphasisStyleProp , [ TextEmphasisColorProp ] | TextEmphasisColorProp , [ TextEmphasisStyleProp ]", ebnf: "text-emphasis =\n TextEmphasisStyleProp , [ TextEmphasisColorProp ] | TextEmphasisColorProp , [ TextEmphasisStyleProp ]", valueType: "keyword", defaultValue: "dot #2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 320, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cstring\u003e", samples: ["\"Specimen\"", "\"Aa\""] }], values: [ v("dot #c5483c", "text-emphasis: dot #c5483c;"), v("dot #2f5fd0", "text-emphasis: dot #2f5fd0;"), v("dot rgb(50%, 80%, 30%, 0.75)", "text-emphasis: dot rgb(50%, 80%, 30%, 0.75);"), v("dot rgb(1, 0.5, 2, 0.75)", "text-emphasis: dot rgb(1, 0.5, 2, 0.75);"), v("dot rgb(from #c5483c 80% 65% 100%/ 2)", "text-emphasis: dot rgb(from #c5483c 80% 65% 100%/ 2);"), v("dot rgba(50%, 80%, 30%, 0.75)", "text-emphasis: dot rgba(50%, 80%, 30%, 0.75);"), v("dot rgba(1, 0.5, 2, 0.75)", "text-emphasis: dot rgba(1, 0.5, 2, 0.75);"), v("dot rgba(from #c5483c 80% 65% 100%/ 2)", "text-emphasis: dot rgba(from #c5483c 80% 65% 100%/ 2);"), v("dot hsl(45deg, 30%, 65%, 0.25)", "text-emphasis: dot hsl(45deg, 30%, 65%, 0.25);"), v("dot hsl(from #c5483c 135deg 65% 100%/ 2)", "text-emphasis: dot hsl(from #c5483c 135deg 65% 100%/ 2);"), v("dot hsla(45deg, 30%, 65%, 0.25)", "text-emphasis: dot hsla(45deg, 30%, 65%, 0.25);"), v("dot hsla(from #c5483c 135deg 65% 100%/ 2)", "text-emphasis: dot hsla(from #c5483c 135deg 65% 100%/ 2);"), v("dot hwb(from #c5483c 135deg 65% 100%/ 2)", "text-emphasis: dot hwb(from #c5483c 135deg 65% 100%/ 2);"), v("dot lab(from #c5483c 80% 15% 80%/ 1)", "text-emphasis: dot lab(from #c5483c 80% 15% 80%/ 1);"), v("dot lch(from #c5483c 80% 15% 250deg/ 1)", "text-emphasis: dot lch(from #c5483c 80% 15% 250deg/ 1);"), v("dot oklab(from #c5483c 80% 15% 80%/ 1)", "text-emphasis: dot oklab(from #c5483c 80% 15% 80%/ 1);"), v("dot oklch(from #c5483c 80% 15% 250deg/ 1)", "text-emphasis: dot oklch(from #c5483c 80% 15% 250deg/ 1);"), v("dot ictcp(from #c5483c 80% 15% 80%/ 1)", "text-emphasis: dot ictcp(from #c5483c 80% 15% 80%/ 1);"), v("dot jzazbz(from #c5483c 80% 15% 80%/ 1)", "text-emphasis: dot jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("dot jzczhz(from #c5483c 80% 15% 250deg/ 1)", "text-emphasis: dot jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("dot alpha(from #c5483c/ 0.5)", "text-emphasis: dot alpha(from #c5483c/ 0.5);"), v("dot color(from #c5483c --my-var 2/ 0.5)", "text-emphasis: dot color(from #c5483c --my-var 2/ 0.5);"), v("dot color-hdr(#c5483c 0.5, #c5483c 0.75)", "text-emphasis: dot color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("dot aliceblue", "text-emphasis: dot aliceblue;"), v("dot antiquewhite", "text-emphasis: dot antiquewhite;"), v("dot aqua", "text-emphasis: dot aqua;"), v("dot aquamarine", "text-emphasis: dot aquamarine;"), v("dot azure", "text-emphasis: dot azure;"), v("dot beige", "text-emphasis: dot beige;"), v("dot bisque", "text-emphasis: dot bisque;"), v("dot black", "text-emphasis: dot black;"), v("dot blanchedalmond", "text-emphasis: dot blanchedalmond;"), v("dot blue", "text-emphasis: dot blue;"), v("dot blueviolet", "text-emphasis: dot blueviolet;"), v("dot brown", "text-emphasis: dot brown;"), v("dot burlywood", "text-emphasis: dot burlywood;"), v("dot cadetblue", "text-emphasis: dot cadetblue;"), v("dot chartreuse", "text-emphasis: dot chartreuse;"), v("dot chocolate", "text-emphasis: dot chocolate;"), v("dot coral", "text-emphasis: dot coral;"), v("dot cornflowerblue", "text-emphasis: dot cornflowerblue;"), v("dot cornsilk", "text-emphasis: dot cornsilk;"), v("dot crimson", "text-emphasis: dot crimson;"), v("dot cyan", "text-emphasis: dot cyan;"), v("dot darkblue", "text-emphasis: dot darkblue;"), v("dot darkcyan", "text-emphasis: dot darkcyan;"), v("dot darkgoldenrod", "text-emphasis: dot darkgoldenrod;"), v("dot darkgray", "text-emphasis: dot darkgray;"), v("dot darkgreen", "text-emphasis: dot darkgreen;"), v("dot darkgrey", "text-emphasis: dot darkgrey;"), ], }, { number: 148, name: "text-emphasis-color", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-emphasis-color\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the color of emphasis marks. This value can also be set using the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-emphasis\"\u003e\u003ccode\u003etext-emphasis\u003c/code\u003e\u003c/a\u003e shorthand.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ColorType", ebnf: "text-emphasis-color =\n ColorType", valueType: "keyword", defaultValue: "#2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("#c5483c", "text-emphasis-color: #c5483c;"), v("#2f5fd0", "text-emphasis-color: #2f5fd0;"), v("rgb(50%, 80%, 30%, 0.75)", "text-emphasis-color: rgb(50%, 80%, 30%, 0.75);"), v("rgb(1, 0.5, 2, 0.75)", "text-emphasis-color: rgb(1, 0.5, 2, 0.75);"), v("rgb(from #c5483c 80% 65% 100%/ 2)", "text-emphasis-color: rgb(from #c5483c 80% 65% 100%/ 2);"), v("rgba(50%, 80%, 30%, 0.75)", "text-emphasis-color: rgba(50%, 80%, 30%, 0.75);"), v("rgba(1, 0.5, 2, 0.75)", "text-emphasis-color: rgba(1, 0.5, 2, 0.75);"), v("rgba(from #c5483c 80% 65% 100%/ 2)", "text-emphasis-color: rgba(from #c5483c 80% 65% 100%/ 2);"), v("hsl(45deg, 30%, 65%, 0.25)", "text-emphasis-color: hsl(45deg, 30%, 65%, 0.25);"), v("hsl(from #c5483c 135deg 65% 100%/ 2)", "text-emphasis-color: hsl(from #c5483c 135deg 65% 100%/ 2);"), v("hsla(45deg, 30%, 65%, 0.25)", "text-emphasis-color: hsla(45deg, 30%, 65%, 0.25);"), v("hsla(from #c5483c 135deg 65% 100%/ 2)", "text-emphasis-color: hsla(from #c5483c 135deg 65% 100%/ 2);"), v("hwb(from #c5483c 135deg 65% 100%/ 2)", "text-emphasis-color: hwb(from #c5483c 135deg 65% 100%/ 2);"), v("lab(from #c5483c 80% 15% 80%/ 1)", "text-emphasis-color: lab(from #c5483c 80% 15% 80%/ 1);"), v("lch(from #c5483c 80% 15% 250deg/ 1)", "text-emphasis-color: lch(from #c5483c 80% 15% 250deg/ 1);"), v("oklab(from #c5483c 80% 15% 80%/ 1)", "text-emphasis-color: oklab(from #c5483c 80% 15% 80%/ 1);"), v("oklch(from #c5483c 80% 15% 250deg/ 1)", "text-emphasis-color: oklch(from #c5483c 80% 15% 250deg/ 1);"), v("ictcp(from #c5483c 80% 15% 80%/ 1)", "text-emphasis-color: ictcp(from #c5483c 80% 15% 80%/ 1);"), v("jzazbz(from #c5483c 80% 15% 80%/ 1)", "text-emphasis-color: jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("jzczhz(from #c5483c 80% 15% 250deg/ 1)", "text-emphasis-color: jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("alpha(from #c5483c/ 0.5)", "text-emphasis-color: alpha(from #c5483c/ 0.5);"), v("color(from #c5483c --my-var 2/ 0.5)", "text-emphasis-color: color(from #c5483c --my-var 2/ 0.5);"), v("color-hdr(#c5483c 0.5, #c5483c 0.75)", "text-emphasis-color: color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("aliceblue", "text-emphasis-color: aliceblue;"), v("antiquewhite", "text-emphasis-color: antiquewhite;"), v("aqua", "text-emphasis-color: aqua;"), v("aquamarine", "text-emphasis-color: aquamarine;"), v("azure", "text-emphasis-color: azure;"), v("beige", "text-emphasis-color: beige;"), v("bisque", "text-emphasis-color: bisque;"), v("black", "text-emphasis-color: black;"), v("blanchedalmond", "text-emphasis-color: blanchedalmond;"), v("blue", "text-emphasis-color: blue;"), v("blueviolet", "text-emphasis-color: blueviolet;"), v("brown", "text-emphasis-color: brown;"), v("burlywood", "text-emphasis-color: burlywood;"), v("cadetblue", "text-emphasis-color: cadetblue;"), v("chartreuse", "text-emphasis-color: chartreuse;"), v("chocolate", "text-emphasis-color: chocolate;"), v("coral", "text-emphasis-color: coral;"), v("cornflowerblue", "text-emphasis-color: cornflowerblue;"), v("cornsilk", "text-emphasis-color: cornsilk;"), v("crimson", "text-emphasis-color: crimson;"), v("cyan", "text-emphasis-color: cyan;"), v("darkblue", "text-emphasis-color: darkblue;"), v("darkcyan", "text-emphasis-color: darkcyan;"), v("darkgoldenrod", "text-emphasis-color: darkgoldenrod;"), v("darkgray", "text-emphasis-color: darkgray;"), v("darkgreen", "text-emphasis-color: darkgreen;"), v("darkgrey", "text-emphasis-color: darkgrey;"), ], }, { number: 149, name: "text-emphasis-position", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-emphasis-position\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets where emphasis marks are drawn. Similar to the text rendered by the \u003ca href=\"/en-US/docs/Web/HTML/Reference/Elements/ruby\"\u003e\u003ccode\u003e\u0026lt;ruby\u0026gt;\u003c/code\u003e\u003c/a\u003e HTML element, if there isn't enough room for emphasis marks, the line height is increased.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\"\n | ( \"over\" | \"under\" ) , [ ( \"right\" | \"left\" ) ]\n | ( \"right\" | \"left\" ) , ( \"over\" | \"under\" )", ebnf: "text-emphasis-position =\n \"auto\"\n | ( \"over\" | \"under\" ) , [ ( \"right\" | \"left\" ) ]\n | ( \"right\" | \"left\" ) , ( \"over\" | \"under\" )", valueType: "keyword", defaultValue: "over right", related: [], provenance: "pure", truncated: false, trueCount: 11, shown: 11, assists: [], values: [ v("auto", "text-emphasis-position: auto;"), v("over right", "text-emphasis-position: over right;"), v("over left", "text-emphasis-position: over left;"), v("over", "text-emphasis-position: over;"), v("under right", "text-emphasis-position: under right;"), v("under left", "text-emphasis-position: under left;"), v("under", "text-emphasis-position: under;"), v("right over", "text-emphasis-position: right over;"), v("right under", "text-emphasis-position: right under;"), v("left over", "text-emphasis-position: left over;"), v("left under", "text-emphasis-position: left under;"), ], }, { number: 150, name: "text-emphasis-style", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-emphasis-style\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the appearance of emphasis marks. It can also be set, and reset, using the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-emphasis\"\u003e\u003ccode\u003etext-emphasis\u003c/code\u003e\u003c/a\u003e shorthand.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"dot\" | \"circle\" | \"double-circle\" | \"triangle\" | \"sesame\" | ( \"open\" , \"dot\" ) | ( \"open\" , \"circle\" ) | ( \"open\" , \"double-circle\" ) | ( \"open\" , \"triangle\" ) | ( \"open\" , \"sesame\" ) | \"none\" | string_type", ebnf: "text-emphasis-style =\n \"dot\" | \"circle\" | \"double-circle\" | \"triangle\" | \"sesame\" | ( \"open\" , \"dot\" ) | ( \"open\" , \"circle\" ) | ( \"open\" , \"double-circle\" ) | ( \"open\" , \"triangle\" ) | ( \"open\" , \"sesame\" ) | \"none\" | string_type", valueType: "keyword", defaultValue: "circle", related: [], provenance: "assisted", truncated: false, trueCount: 13, shown: 13, assists: [{ type: "\u003cstring\u003e", samples: ["\"Specimen\"", "\"Aa\""] }], values: [ v("dot", "text-emphasis-style: dot;"), v("circle", "text-emphasis-style: circle;"), v("double-circle", "text-emphasis-style: double-circle;"), v("triangle", "text-emphasis-style: triangle;"), v("sesame", "text-emphasis-style: sesame;"), v("open dot", "text-emphasis-style: open dot;"), v("open circle", "text-emphasis-style: open circle;"), v("open double-circle", "text-emphasis-style: open double-circle;"), v("open triangle", "text-emphasis-style: open triangle;"), v("open sesame", "text-emphasis-style: open sesame;"), v("none", "text-emphasis-style: none;"), v("\"Specimen\"", "text-emphasis-style: \"Specimen\";"), v("\"Aa\"", "text-emphasis-style: \"Aa\";"), ], }, { number: 151, name: "text-indent", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-indent\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the length of empty space (indentation) that is put before lines of text in a block.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LengthPercentageType , [ \"hanging\" ] , [ \"each-line\" ]", ebnf: "text-indent =\n LengthPercentageType , [ \"hanging\" ] , [ \"each-line\" ]", valueType: "length", defaultValue: "24px hanging", related: [], provenance: "assisted", truncated: true, trueCount: 76, shown: 50, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px hanging each-line", "text-indent: 24px hanging each-line;"), v("24px hanging", "text-indent: 24px hanging;"), v("24px each-line", "text-indent: 24px each-line;"), v("24px", "text-indent: 24px;"), v("48px hanging each-line", "text-indent: 48px hanging each-line;"), v("48px hanging", "text-indent: 48px hanging;"), v("48px each-line", "text-indent: 48px each-line;"), v("48px", "text-indent: 48px;"), v("8px hanging each-line", "text-indent: 8px hanging each-line;"), v("8px hanging", "text-indent: 8px hanging;"), v("8px each-line", "text-indent: 8px each-line;"), v("8px", "text-indent: 8px;"), v("16px hanging each-line", "text-indent: 16px hanging each-line;"), v("16px hanging", "text-indent: 16px hanging;"), v("16px each-line", "text-indent: 16px each-line;"), v("16px", "text-indent: 16px;"), v("64px hanging each-line", "text-indent: 64px hanging each-line;"), v("64px hanging", "text-indent: 64px hanging;"), v("64px each-line", "text-indent: 64px each-line;"), v("64px", "text-indent: 64px;"), v("50% hanging each-line", "text-indent: 50% hanging each-line;"), v("50% hanging", "text-indent: 50% hanging;"), v("50% each-line", "text-indent: 50% each-line;"), v("50%", "text-indent: 50%;"), v("80% hanging each-line", "text-indent: 80% hanging each-line;"), v("80% hanging", "text-indent: 80% hanging;"), v("80% each-line", "text-indent: 80% each-line;"), v("80%", "text-indent: 80%;"), v("30% hanging each-line", "text-indent: 30% hanging each-line;"), v("30% hanging", "text-indent: 30% hanging;"), v("30% each-line", "text-indent: 30% each-line;"), v("30%", "text-indent: 30%;"), v("65% hanging each-line", "text-indent: 65% hanging each-line;"), v("65% hanging", "text-indent: 65% hanging;"), v("65% each-line", "text-indent: 65% each-line;"), v("65%", "text-indent: 65%;"), v("15% hanging each-line", "text-indent: 15% hanging each-line;"), v("15% hanging", "text-indent: 15% hanging;"), v("15% each-line", "text-indent: 15% each-line;"), v("15%", "text-indent: 15%;"), v("100% hanging each-line", "text-indent: 100% hanging each-line;"), v("100% hanging", "text-indent: 100% hanging;"), v("100% each-line", "text-indent: 100% each-line;"), v("100%", "text-indent: 100%;"), v("calc(24px) hanging each-line", "text-indent: calc(24px) hanging each-line;"), v("calc(24px) hanging", "text-indent: calc(24px) hanging;"), v("calc(24px) each-line", "text-indent: calc(24px) each-line;"), v("calc(24px)", "text-indent: calc(24px);"), v("clamp(24px, 2em, 48px) hanging each-line", "text-indent: clamp(24px, 2em, 48px) hanging each-line;"), v("clamp(24px, 2em, 48px) hanging", "text-indent: clamp(24px, 2em, 48px) hanging;"), ], }, { number: 152, name: "text-justify", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-justify\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets what type of justification should be applied to text when \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-align\"\u003e\u003ccode\u003etext-align: justify;\u003c/code\u003e\u003c/a\u003e is set on an element.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "( \"auto\" | \"none\" | \"inter-word\" | \"inter-character\" | \"inter-ideograph\" | \"distribute\" | \"ruby\" ) , [ \"no-compress\" ]\n | \"no-compress\" , [ ( \"auto\" | \"none\" | \"inter-word\" | \"inter-character\" | \"inter-ideograph\" | \"distribute\" | \"ruby\" ) ]", ebnf: "text-justify =\n ( \"auto\" | \"none\" | \"inter-word\" | \"inter-character\" | \"inter-ideograph\" | \"distribute\" | \"ruby\" ) , [ \"no-compress\" ]\n | \"no-compress\" , [ ( \"auto\" | \"none\" | \"inter-word\" | \"inter-character\" | \"inter-ideograph\" | \"distribute\" | \"ruby\" ) ]", valueType: "keyword", defaultValue: "auto", related: [], provenance: "pure", truncated: false, trueCount: 22, shown: 22, assists: [], values: [ v("auto no-compress", "text-justify: auto no-compress;"), v("auto", "text-justify: auto;"), v("none no-compress", "text-justify: none no-compress;"), v("none", "text-justify: none;"), v("inter-word no-compress", "text-justify: inter-word no-compress;"), v("inter-word", "text-justify: inter-word;"), v("inter-character no-compress", "text-justify: inter-character no-compress;"), v("inter-character", "text-justify: inter-character;"), v("inter-ideograph no-compress", "text-justify: inter-ideograph no-compress;"), v("inter-ideograph", "text-justify: inter-ideograph;"), v("distribute no-compress", "text-justify: distribute no-compress;"), v("distribute", "text-justify: distribute;"), v("ruby no-compress", "text-justify: ruby no-compress;"), v("ruby", "text-justify: ruby;"), v("no-compress auto", "text-justify: no-compress auto;"), v("no-compress none", "text-justify: no-compress none;"), v("no-compress inter-word", "text-justify: no-compress inter-word;"), v("no-compress inter-character", "text-justify: no-compress inter-character;"), v("no-compress inter-ideograph", "text-justify: no-compress inter-ideograph;"), v("no-compress distribute", "text-justify: no-compress distribute;"), v("no-compress ruby", "text-justify: no-compress ruby;"), v("no-compress", "text-justify: no-compress;"), ], }, { number: 153, name: "text-overflow", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-overflow\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis (\u003ccode\u003e…\u003c/code\u003e), or display a custom string.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "TextOverflowPropItem , [ TextOverflowPropItem ]", ebnf: "text-overflow =\n TextOverflowPropItem , [ TextOverflowPropItem ]", valueType: "keyword", defaultValue: "ellipsis", related: [], provenance: "assisted", truncated: false, trueCount: 6, shown: 6, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cstring\u003e", samples: ["\"Specimen\"", "\"Aa\""] }], values: [ v("clip", "text-overflow: clip;"), v("ellipsis", "text-overflow: ellipsis;"), v("\"Specimen\"", "text-overflow: \"Specimen\";"), v("\"Aa\"", "text-overflow: \"Aa\";"), v("fade", "text-overflow: fade;"), v("fade(24px)", "text-overflow: fade(24px);"), ], }, { number: 154, name: "text-rendering", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-rendering\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property provides information to the rendering engine about what to optimize for when rendering text.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"optimizeSpeed\" | \"optimizeLegibility\" | \"geometricPrecision\"", ebnf: "text-rendering =\n \"auto\" | \"optimizeSpeed\" | \"optimizeLegibility\" | \"geometricPrecision\"", valueType: "keyword", defaultValue: "optimizeSpeed", related: [], provenance: "pure", truncated: false, trueCount: 4, shown: 4, assists: [], values: [ v("auto", "text-rendering: auto;"), v("optimizeSpeed", "text-rendering: optimizeSpeed;"), v("optimizeLegibility", "text-rendering: optimizeLegibility;"), v("geometricPrecision", "text-rendering: geometricPrecision;"), ], }, { number: 155, name: "text-shadow", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-shadow\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-decoration\"\u003e\u003ccode\u003etext-decoration\u003c/code\u003e\u003c/a\u003e. Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | ShadowType , { \",\" , ShadowType }", ebnf: "text-shadow =\n \"none\" | ShadowType , { \",\" , ShadowType }", valueType: "length", defaultValue: "#c5483c 3px 3px 6px", related: [], provenance: "assisted", truncated: false, trueCount: 4, shown: 4, assists: [{ type: "ShadowType", samples: ["#c5483c 3px 3px 6px", "0 2px 8px #2f5fd0", "2px 2px 0 #c5483c"] }], values: [ v("none", "text-shadow: none;"), v("#c5483c 3px 3px 6px", "text-shadow: #c5483c 3px 3px 6px;"), v("0 2px 8px #2f5fd0", "text-shadow: 0 2px 8px #2f5fd0;"), v("2px 2px 0 #c5483c", "text-shadow: 2px 2px 0 #c5483c;"), ], }, { number: 156, name: "text-size-adjust", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-size-adjust\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/API/CSS\"\u003eCSS\u003c/a\u003e property controls the text inflation algorithm used on some smartphones and tablets. Other browsers will ignore this property.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"none\" | PercentageType", ebnf: "text-size-adjust =\n \"auto\" | \"none\" | PercentageType", valueType: "keyword", defaultValue: "none", related: [], provenance: "assisted", truncated: false, trueCount: 8, shown: 8, assists: [{ type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "text-size-adjust: auto;"), v("none", "text-size-adjust: none;"), v("50%", "text-size-adjust: 50%;"), v("80%", "text-size-adjust: 80%;"), v("30%", "text-size-adjust: 30%;"), v("65%", "text-size-adjust: 65%;"), v("15%", "text-size-adjust: 15%;"), v("100%", "text-size-adjust: 100%;"), ], }, { number: 157, name: "text-spacing-trim", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-spacing-trim\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property controls the internal spacing set on Chinese/Japanese/Korean (CJK) punctuation characters between adjacent characters (kerning) and at the start or end of text lines.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "SpacingTrimType | \"auto\"", ebnf: "text-spacing-trim =\n SpacingTrimType | \"auto\"", valueType: "keyword", defaultValue: "normal", related: [], provenance: "pure", truncated: false, trueCount: 7, shown: 7, assists: [], values: [ v("space-all", "text-spacing-trim: space-all;"), v("normal", "text-spacing-trim: normal;"), v("space-first", "text-spacing-trim: space-first;"), v("trim-start", "text-spacing-trim: trim-start;"), v("trim-both", "text-spacing-trim: trim-both;"), v("trim-all", "text-spacing-trim: trim-all;"), v("auto", "text-spacing-trim: auto;"), ], }, { number: 158, name: "text-transform", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-transform\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | [ ( \"capitalize\" | \"uppercase\" | \"lowercase\" ) ] , [ \"full-width\" ] , [ \"full-size-kana\" ] | \"math-auto\"", ebnf: "text-transform =\n \"none\" | [ ( \"capitalize\" | \"uppercase\" | \"lowercase\" ) ] , [ \"full-width\" ] , [ \"full-size-kana\" ] | \"math-auto\"", valueType: "keyword", defaultValue: "capitalize full-width full-size-kana", related: [], provenance: "pure", truncated: false, trueCount: 17, shown: 17, assists: [], values: [ v("none", "text-transform: none;"), v("capitalize full-width full-size-kana", "text-transform: capitalize full-width full-size-kana;"), v("capitalize full-width", "text-transform: capitalize full-width;"), v("capitalize full-size-kana", "text-transform: capitalize full-size-kana;"), v("capitalize", "text-transform: capitalize;"), v("uppercase full-width full-size-kana", "text-transform: uppercase full-width full-size-kana;"), v("uppercase full-width", "text-transform: uppercase full-width;"), v("uppercase full-size-kana", "text-transform: uppercase full-size-kana;"), v("uppercase", "text-transform: uppercase;"), v("lowercase full-width full-size-kana", "text-transform: lowercase full-width full-size-kana;"), v("lowercase full-width", "text-transform: lowercase full-width;"), v("lowercase full-size-kana", "text-transform: lowercase full-size-kana;"), v("lowercase", "text-transform: lowercase;"), v("full-width full-size-kana", "text-transform: full-width full-size-kana;"), v("full-width", "text-transform: full-width;"), v("full-size-kana", "text-transform: full-size-kana;"), v("math-auto", "text-transform: math-auto;"), ], }, { number: 159, name: "text-underline-offset", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-underline-offset\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the offset distance of an underline text decoration line (applied using \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-decoration\"\u003e\u003ccode\u003etext-decoration\u003c/code\u003e\u003c/a\u003e) from its original position.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | LengthPercentageType", ebnf: "text-underline-offset =\n \"auto\" | LengthPercentageType", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 20, shown: 20, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "text-underline-offset: auto;"), v("24px", "text-underline-offset: 24px;"), v("48px", "text-underline-offset: 48px;"), v("8px", "text-underline-offset: 8px;"), v("16px", "text-underline-offset: 16px;"), v("64px", "text-underline-offset: 64px;"), v("50%", "text-underline-offset: 50%;"), v("80%", "text-underline-offset: 80%;"), v("30%", "text-underline-offset: 30%;"), v("65%", "text-underline-offset: 65%;"), v("15%", "text-underline-offset: 15%;"), v("100%", "text-underline-offset: 100%;"), v("calc(24px)", "text-underline-offset: calc(24px);"), v("clamp(24px, 2em, 48px)", "text-underline-offset: clamp(24px, 2em, 48px);"), v("min(24px)", "text-underline-offset: min(24px);"), v("max(24px)", "text-underline-offset: max(24px);"), v("round(nearest, 24px, 2em)", "text-underline-offset: round(nearest, 24px, 2em);"), v("abs(24px)", "text-underline-offset: abs(24px);"), v("var(--my-var, 48px)", "text-underline-offset: var(--my-var, 48px);"), v("env(my-ident, 48px)", "text-underline-offset: env(my-ident, 48px);"), ], }, { number: 160, name: "text-underline-position", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-underline-position\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the position of the underline which is set using the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-decoration\"\u003e\u003ccode\u003etext-decoration\u003c/code\u003e\u003c/a\u003e property's \u003ccode\u003eunderline\u003c/code\u003e value.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | [ ( \"from-font\" | \"under\" ) ] , [ ( \"left\" | \"right\" ) ]", ebnf: "text-underline-position =\n \"auto\" | [ ( \"from-font\" | \"under\" ) ] , [ ( \"left\" | \"right\" ) ]", valueType: "keyword", defaultValue: "from-font left", related: [], provenance: "pure", truncated: false, trueCount: 9, shown: 9, assists: [], values: [ v("auto", "text-underline-position: auto;"), v("from-font left", "text-underline-position: from-font left;"), v("from-font right", "text-underline-position: from-font right;"), v("from-font", "text-underline-position: from-font;"), v("under left", "text-underline-position: under left;"), v("under right", "text-underline-position: under right;"), v("under", "text-underline-position: under;"), v("left", "text-underline-position: left;"), v("right", "text-underline-position: right;"), ], }, ], }, { id: "line-spacing", sigil: "10", title: "Line \u0026 Inline Spacing", blurb: "Leading, spacing, wrapping, breaking and hyphenation.", demo: "type", sampleKind: "text", group: "families", focus: false, gallery: false, count: 15, properties: [ { number: 161, name: "hyphenate-character", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ehyphenate-character\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the character (or string) used at the end of a line before a hyphenation break.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | string_type", ebnf: "hyphenate-character =\n \"auto\" | string_type", valueType: "keyword", defaultValue: "\"Specimen\"", related: [], provenance: "assisted", truncated: false, trueCount: 3, shown: 3, assists: [{ type: "\u003cstring\u003e", samples: ["\"Specimen\"", "\"Aa\""] }], values: [ v("auto", "hyphenate-character: auto;"), v("\"Specimen\"", "hyphenate-character: \"Specimen\";"), v("\"Aa\"", "hyphenate-character: \"Aa\";"), ], }, { number: 162, name: "hyphenate-limit-chars", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ehyphenate-limit-chars\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the minimum word length to allow hyphenation of words as well as the minimum number of characters before and after the hyphen.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "HyphenateLimitCharsPropItem , [ HyphenateLimitCharsPropItem ] , [ HyphenateLimitCharsPropItem ]", ebnf: "hyphenate-limit-chars =\n HyphenateLimitCharsPropItem , [ HyphenateLimitCharsPropItem ] , [ HyphenateLimitCharsPropItem ]", valueType: "number", defaultValue: "2", related: [], provenance: "assisted", truncated: false, trueCount: 6, shown: 6, assists: [{ type: "\u003cinteger\u003e", samples: ["2", "1", "3", "5", "4"] }], values: [ v("auto", "hyphenate-limit-chars: auto;"), v("2", "hyphenate-limit-chars: 2;"), v("1", "hyphenate-limit-chars: 1;"), v("3", "hyphenate-limit-chars: 3;"), v("5", "hyphenate-limit-chars: 5;"), v("4", "hyphenate-limit-chars: 4;"), ], }, { number: 163, name: "hyphens", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ehyphens\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies how words should be hyphenated when text wraps across multiple lines. It can prevent hyphenation entirely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | \"manual\" | \"auto\"", ebnf: "hyphens =\n \"none\" | \"manual\" | \"auto\"", valueType: "keyword", defaultValue: "manual", related: [], provenance: "pure", truncated: false, trueCount: 3, shown: 3, assists: [], values: [ v("none", "hyphens: none;"), v("manual", "hyphens: manual;"), v("auto", "hyphens: auto;"), ], }, { number: 164, name: "line-break", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eline-break\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"loose\" | \"normal\" | \"strict\" | \"anywhere\"", ebnf: "line-break =\n \"auto\" | \"loose\" | \"normal\" | \"strict\" | \"anywhere\"", valueType: "keyword", defaultValue: "loose", related: [], provenance: "pure", truncated: false, trueCount: 5, shown: 5, assists: [], values: [ v("auto", "line-break: auto;"), v("loose", "line-break: loose;"), v("normal", "line-break: normal;"), v("strict", "line-break: strict;"), v("anywhere", "line-break: anywhere;"), ], }, { number: 165, name: "line-height", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eline-height\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the height of a line box in horizontal \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode#vertical-rl\"\u003ewriting modes\u003c/a\u003e. In vertical writing modes, it sets the width of a line box. It's commonly used to set the distance between lines of text. On block-level elements in horizontal writing modes, it specifies the preferred height of line boxes within the element, and on non-\u003ca href=\"/en-US/docs/Glossary/Replaced_elements\"\u003ereplaced\u003c/a\u003e inline elements, it specifies the height that is used to calculate line box height.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | NumberType | NonNegativeLengthPercentageType", ebnf: "line-height =\n \"normal\" | NumberType | NonNegativeLengthPercentageType", valueType: "length", defaultValue: "1", related: [], provenance: "assisted", truncated: false, trueCount: 24, shown: 24, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("normal", "line-height: normal;"), v("1", "line-height: 1;"), v("0.5", "line-height: 0.5;"), v("2", "line-height: 2;"), v("0.75", "line-height: 0.75;"), v("0.25", "line-height: 0.25;"), v("24px", "line-height: 24px;"), v("48px", "line-height: 48px;"), v("8px", "line-height: 8px;"), v("16px", "line-height: 16px;"), v("64px", "line-height: 64px;"), v("50%", "line-height: 50%;"), v("80%", "line-height: 80%;"), v("30%", "line-height: 30%;"), v("65%", "line-height: 65%;"), v("15%", "line-height: 15%;"), v("100%", "line-height: 100%;"), v("calc(24px)", "line-height: calc(24px);"), v("clamp(24px, 2em, 48px)", "line-height: clamp(24px, 2em, 48px);"), v("min(24px)", "line-height: min(24px);"), v("max(24px)", "line-height: max(24px);"), v("round(nearest, 24px, 2em)", "line-height: round(nearest, 24px, 2em);"), v("abs(24px)", "line-height: abs(24px);"), v("env(my-ident, 48px)", "line-height: env(my-ident, 48px);"), ], }, { number: 166, name: "overflow-wrap", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eoverflow-wrap\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property applies to text, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | \"break-word\" | \"anywhere\"", ebnf: "overflow-wrap =\n \"normal\" | \"break-word\" | \"anywhere\"", valueType: "keyword", defaultValue: "break-word", related: [], provenance: "pure", truncated: false, trueCount: 3, shown: 3, assists: [], values: [ v("normal", "overflow-wrap: normal;"), v("break-word", "overflow-wrap: break-word;"), v("anywhere", "overflow-wrap: anywhere;"), ], }, { number: 167, name: "tab-size", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etab-size\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property is used to customize the width of tab characters (U+0009).", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "NumberType | NonNegativeLengthType", ebnf: "tab-size =\n NumberType | NonNegativeLengthType", valueType: "length", defaultValue: "0.5", related: [], provenance: "assisted", truncated: false, trueCount: 10, shown: 10, assists: [{ type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }], values: [ v("1", "tab-size: 1;"), v("0.5", "tab-size: 0.5;"), v("2", "tab-size: 2;"), v("0.75", "tab-size: 0.75;"), v("0.25", "tab-size: 0.25;"), v("24px", "tab-size: 24px;"), v("48px", "tab-size: 48px;"), v("8px", "tab-size: 8px;"), v("16px", "tab-size: 16px;"), v("64px", "tab-size: 64px;"), ], }, { number: 168, name: "text-wrap", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-wrap\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e shorthand property controls how text inside an element is wrapped. The different values provide:", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "[ TextWrapModeProp ] , [ TextWrapStyleProp ]", ebnf: "text-wrap =\n [ TextWrapModeProp ] , [ TextWrapStyleProp ]", valueType: "keyword", defaultValue: "wrap balance", related: [], provenance: "pure", truncated: false, trueCount: 17, shown: 17, assists: [], values: [ v("wrap auto", "text-wrap: wrap auto;"), v("wrap balance", "text-wrap: wrap balance;"), v("wrap stable", "text-wrap: wrap stable;"), v("wrap pretty", "text-wrap: wrap pretty;"), v("wrap avoid-orphans", "text-wrap: wrap avoid-orphans;"), v("wrap", "text-wrap: wrap;"), v("nowrap auto", "text-wrap: nowrap auto;"), v("nowrap balance", "text-wrap: nowrap balance;"), v("nowrap stable", "text-wrap: nowrap stable;"), v("nowrap pretty", "text-wrap: nowrap pretty;"), v("nowrap avoid-orphans", "text-wrap: nowrap avoid-orphans;"), v("nowrap", "text-wrap: nowrap;"), v("auto", "text-wrap: auto;"), v("balance", "text-wrap: balance;"), v("stable", "text-wrap: stable;"), v("pretty", "text-wrap: pretty;"), v("avoid-orphans", "text-wrap: avoid-orphans;"), ], }, { number: 169, name: "text-wrap-mode", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-wrap-mode\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property controls whether the text inside an element is wrapped. The different values provide alternate ways of wrapping the content of a block element. It can also be set, and reset, using the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-wrap\"\u003e\u003ccode\u003etext-wrap\u003c/code\u003e\u003c/a\u003e shorthand or the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/white-space\"\u003e\u003ccode\u003ewhite-space\u003c/code\u003e\u003c/a\u003e shorthand.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"wrap\" | \"nowrap\"", ebnf: "text-wrap-mode =\n \"wrap\" | \"nowrap\"", valueType: "keyword", defaultValue: "nowrap", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("wrap", "text-wrap-mode: wrap;"), v("nowrap", "text-wrap-mode: nowrap;"), ], }, { number: 170, name: "text-wrap-style", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-wrap-style\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property controls how text inside an element is wrapped. The different values provide alternate ways of wrapping the content of a block element. It can also be set, and reset, using the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-wrap\"\u003e\u003ccode\u003etext-wrap\u003c/code\u003e\u003c/a\u003e shorthand.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"balance\" | \"stable\" | \"pretty\" | \"avoid-orphans\"", ebnf: "text-wrap-style =\n \"auto\" | \"balance\" | \"stable\" | \"pretty\" | \"avoid-orphans\"", valueType: "keyword", defaultValue: "balance", related: [], provenance: "pure", truncated: false, trueCount: 5, shown: 5, assists: [], values: [ v("auto", "text-wrap-style: auto;"), v("balance", "text-wrap-style: balance;"), v("stable", "text-wrap-style: stable;"), v("pretty", "text-wrap-style: pretty;"), v("avoid-orphans", "text-wrap-style: avoid-orphans;"), ], }, { number: 171, name: "white-space", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ewhite-space\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets how \u003ca href=\"/en-US/docs/Glossary/Whitespace\"\u003ewhite space\u003c/a\u003e inside an element is handled.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | \"pre\" | \"pre-wrap\" | \"pre-line\" | [ WhiteSpaceCollapseProp ] , [ TextWrapModeProp ] , [ \"white-space-trim\" ]", ebnf: "white-space =\n \"normal\" | \"pre\" | \"pre-wrap\" | \"pre-line\" | [ WhiteSpaceCollapseProp ] , [ TextWrapModeProp ] , [ \"white-space-trim\" ]", valueType: "keyword", defaultValue: "pre", related: [], provenance: "pure", truncated: false, trueCount: 45, shown: 45, assists: [], values: [ v("normal", "white-space: normal;"), v("pre", "white-space: pre;"), v("pre-wrap", "white-space: pre-wrap;"), v("pre-line", "white-space: pre-line;"), v("collapse wrap white-space-trim", "white-space: collapse wrap white-space-trim;"), v("collapse wrap", "white-space: collapse wrap;"), v("collapse nowrap white-space-trim", "white-space: collapse nowrap white-space-trim;"), v("collapse nowrap", "white-space: collapse nowrap;"), v("collapse white-space-trim", "white-space: collapse white-space-trim;"), v("collapse", "white-space: collapse;"), v("discard wrap white-space-trim", "white-space: discard wrap white-space-trim;"), v("discard wrap", "white-space: discard wrap;"), v("discard nowrap white-space-trim", "white-space: discard nowrap white-space-trim;"), v("discard nowrap", "white-space: discard nowrap;"), v("discard white-space-trim", "white-space: discard white-space-trim;"), v("discard", "white-space: discard;"), v("preserve wrap white-space-trim", "white-space: preserve wrap white-space-trim;"), v("preserve wrap", "white-space: preserve wrap;"), v("preserve nowrap white-space-trim", "white-space: preserve nowrap white-space-trim;"), v("preserve nowrap", "white-space: preserve nowrap;"), v("preserve white-space-trim", "white-space: preserve white-space-trim;"), v("preserve", "white-space: preserve;"), v("preserve-breaks wrap white-space-trim", "white-space: preserve-breaks wrap white-space-trim;"), v("preserve-breaks wrap", "white-space: preserve-breaks wrap;"), v("preserve-breaks nowrap white-space-trim", "white-space: preserve-breaks nowrap white-space-trim;"), v("preserve-breaks nowrap", "white-space: preserve-breaks nowrap;"), v("preserve-breaks white-space-trim", "white-space: preserve-breaks white-space-trim;"), v("preserve-breaks", "white-space: preserve-breaks;"), v("preserve-spaces wrap white-space-trim", "white-space: preserve-spaces wrap white-space-trim;"), v("preserve-spaces wrap", "white-space: preserve-spaces wrap;"), v("preserve-spaces nowrap white-space-trim", "white-space: preserve-spaces nowrap white-space-trim;"), v("preserve-spaces nowrap", "white-space: preserve-spaces nowrap;"), v("preserve-spaces white-space-trim", "white-space: preserve-spaces white-space-trim;"), v("preserve-spaces", "white-space: preserve-spaces;"), v("break-spaces wrap white-space-trim", "white-space: break-spaces wrap white-space-trim;"), v("break-spaces wrap", "white-space: break-spaces wrap;"), v("break-spaces nowrap white-space-trim", "white-space: break-spaces nowrap white-space-trim;"), v("break-spaces nowrap", "white-space: break-spaces nowrap;"), v("break-spaces white-space-trim", "white-space: break-spaces white-space-trim;"), v("break-spaces", "white-space: break-spaces;"), v("wrap white-space-trim", "white-space: wrap white-space-trim;"), v("wrap", "white-space: wrap;"), v("nowrap white-space-trim", "white-space: nowrap white-space-trim;"), v("nowrap", "white-space: nowrap;"), v("white-space-trim", "white-space: white-space-trim;"), ], }, { number: 172, name: "white-space-collapse", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ewhite-space-collapse\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property controls how \u003ca href=\"/en-US/docs/Glossary/Whitespace\"\u003ewhite space\u003c/a\u003e inside an element is collapsed.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"collapse\" | \"discard\" | \"preserve\" | \"preserve-breaks\" | \"preserve-spaces\" | \"break-spaces\"", ebnf: "white-space-collapse =\n \"collapse\" | \"discard\" | \"preserve\" | \"preserve-breaks\" | \"preserve-spaces\" | \"break-spaces\"", valueType: "keyword", defaultValue: "discard", related: [], provenance: "pure", truncated: false, trueCount: 6, shown: 6, assists: [], values: [ v("collapse", "white-space-collapse: collapse;"), v("discard", "white-space-collapse: discard;"), v("preserve", "white-space-collapse: preserve;"), v("preserve-breaks", "white-space-collapse: preserve-breaks;"), v("preserve-spaces", "white-space-collapse: preserve-spaces;"), v("break-spaces", "white-space-collapse: break-spaces;"), ], }, { number: 173, name: "word-break", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eword-break\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets whether line breaks appear wherever the text would otherwise overflow its content box.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | \"break-all\" | \"keep-all\" | \"manual\" | \"auto-phrase\" | \"break-word\"", ebnf: "word-break =\n \"normal\" | \"break-all\" | \"keep-all\" | \"manual\" | \"auto-phrase\" | \"break-word\"", valueType: "keyword", defaultValue: "break-all", related: [], provenance: "pure", truncated: false, trueCount: 6, shown: 6, assists: [], values: [ v("normal", "word-break: normal;"), v("break-all", "word-break: break-all;"), v("keep-all", "word-break: keep-all;"), v("manual", "word-break: manual;"), v("auto-phrase", "word-break: auto-phrase;"), v("break-word", "word-break: break-word;"), ], }, { number: 174, name: "word-spacing", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eword-spacing\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the spacing between words and between tags.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | NonNegativeLengthPercentageType", ebnf: "word-spacing =\n \"normal\" | NonNegativeLengthPercentageType", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 19, shown: 19, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("normal", "word-spacing: normal;"), v("24px", "word-spacing: 24px;"), v("48px", "word-spacing: 48px;"), v("8px", "word-spacing: 8px;"), v("16px", "word-spacing: 16px;"), v("64px", "word-spacing: 64px;"), v("50%", "word-spacing: 50%;"), v("80%", "word-spacing: 80%;"), v("30%", "word-spacing: 30%;"), v("65%", "word-spacing: 65%;"), v("15%", "word-spacing: 15%;"), v("100%", "word-spacing: 100%;"), v("calc(24px)", "word-spacing: calc(24px);"), v("clamp(24px, 2em, 48px)", "word-spacing: clamp(24px, 2em, 48px);"), v("min(24px)", "word-spacing: min(24px);"), v("max(24px)", "word-spacing: max(24px);"), v("round(nearest, 24px, 2em)", "word-spacing: round(nearest, 24px, 2em);"), v("abs(24px)", "word-spacing: abs(24px);"), v("env(my-ident, 48px)", "word-spacing: env(my-ident, 48px);"), ], }, { number: 175, name: "word-wrap", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eoverflow-wrap\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property applies to text, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | \"break-word\" | \"anywhere\"", ebnf: "word-wrap =\n \"normal\" | \"break-word\" | \"anywhere\"", valueType: "keyword", defaultValue: "break-word", related: [], provenance: "pure", truncated: false, trueCount: 3, shown: 3, assists: [], values: [ v("normal", "word-wrap: normal;"), v("break-word", "word-wrap: break-word;"), v("anywhere", "word-wrap: anywhere;"), ], }, ], }, { id: "writing-mode", sigil: "11", title: "Writing Mode \u0026 Direction", blurb: "Block direction, inline direction and character orientation.", demo: "type", sampleKind: "text", group: "families", focus: false, gallery: false, count: 6, properties: [ { number: 176, name: "box-direction", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebox-direction\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies whether a box lays out its contents normally (from the top or left edge), or in reverse (from the bottom or right edge).", experimental: false, nonstandard: true, deprecated: true, warning: "\u003cstrong\u003eWarning:\u003c/strong\u003e This is a property of the original CSS flexible box layout Module draft, and has been replaced by a newer standard. The \u003ccode\u003e-moz-box-direction\u003c/code\u003e will only be used for XUL while the previous standard \u003ccode\u003ebox-direction\u003c/code\u003e has been replaced by \u003ccode\u003eflex-direction\u003c/code\u003e. See \u003ca href=\"/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts\"\u003eflexbox\u003c/a\u003e for information about the current standard.", syntax: "\"normal\" | \"reverse\"", ebnf: "box-direction =\n \"normal\" | \"reverse\"", valueType: "keyword", defaultValue: "reverse", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("normal", "box-direction: normal;"), v("reverse", "box-direction: reverse;"), ], }, { number: 177, name: "direction", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the direction of text, table and grid columns, and horizontal overflow. Use \u003ccode\u003ertl\u003c/code\u003e for languages written from right to left (like Hebrew or Arabic), and \u003ccode\u003eltr\u003c/code\u003e for those written from left to right (like English and most other languages).", experimental: false, nonstandard: false, deprecated: false, warning: "\u003cstrong\u003eWarning:\u003c/strong\u003e Where possible, authors are encouraged to avoid using the \u003ccode\u003edirection\u003c/code\u003e CSS property and use the HTML \u003ca href=\"/en-US/docs/Web/HTML/Reference/Global_attributes/dir\"\u003e\u003ccode\u003edir\u003c/code\u003e\u003c/a\u003e global attribute instead.", syntax: "\"ltr\" | \"rtl\"", ebnf: "direction =\n \"ltr\" | \"rtl\"", valueType: "keyword", defaultValue: "rtl", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("ltr", "direction: ltr;"), v("rtl", "direction: rtl;"), ], }, { number: 178, name: "text-combine-upright", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-combine-upright\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the combination of characters into the space of a single character. If the combined text is wider than 1em, the user agent must fit the contents within 1em. The resulting composition is treated as a single upright glyph for layout and decoration. This property only has an effect in vertical writing modes.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | \"all\" | \"digits\" , [ IntegerType ]", ebnf: "text-combine-upright =\n \"none\" | \"all\" | \"digits\" , [ IntegerType ]", valueType: "keyword", defaultValue: "all", related: [], provenance: "assisted", truncated: false, trueCount: 8, shown: 8, assists: [{ type: "\u003cinteger\u003e", samples: ["2", "1", "3", "5", "4"] }], values: [ v("none", "text-combine-upright: none;"), v("all", "text-combine-upright: all;"), v("digits 2", "text-combine-upright: digits 2;"), v("digits 1", "text-combine-upright: digits 1;"), v("digits 3", "text-combine-upright: digits 3;"), v("digits 5", "text-combine-upright: digits 5;"), v("digits 4", "text-combine-upright: digits 4;"), v("digits", "text-combine-upright: digits;"), ], }, { number: 179, name: "text-orientation", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the orientation of the text characters in a line. It only affects text in vertical mode (when \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e is not \u003ccode\u003ehorizontal-tb\u003c/code\u003e). It is useful for controlling the display of languages that use vertical script, and also for making vertical table headers.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"mixed\" | \"upright\" | \"sideways\"", ebnf: "text-orientation =\n \"mixed\" | \"upright\" | \"sideways\"", valueType: "keyword", defaultValue: "upright", related: [], provenance: "pure", truncated: false, trueCount: 3, shown: 3, assists: [], values: [ v("mixed", "text-orientation: mixed;"), v("upright", "text-orientation: upright;"), v("sideways", "text-orientation: sideways;"), ], }, { number: 180, name: "unicode-bidi", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eunicode-bidi\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property, together with the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e property, determines how bidirectional text in a document is handled. For example, if a block of content contains both left-to-right and right-to-left text, the user-agent uses a complex Unicode algorithm to decide how to display the text. The \u003ccode\u003eunicode-bidi\u003c/code\u003e property overrides this algorithm and allows the developer to control the text embedding.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | \"embed\" | \"isolate\" | \"bidi-override\" | \"isolate-override\" | \"plaintext\"", ebnf: "unicode-bidi =\n \"normal\" | \"embed\" | \"isolate\" | \"bidi-override\" | \"isolate-override\" | \"plaintext\"", valueType: "keyword", defaultValue: "embed", related: [], provenance: "pure", truncated: false, trueCount: 6, shown: 6, assists: [], values: [ v("normal", "unicode-bidi: normal;"), v("embed", "unicode-bidi: embed;"), v("isolate", "unicode-bidi: isolate;"), v("bidi-override", "unicode-bidi: bidi-override;"), v("isolate-override", "unicode-bidi: isolate-override;"), v("plaintext", "unicode-bidi: plaintext;"), ], }, { number: 181, name: "writing-mode", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. When set for an entire document, it should be set on the root element (\u003ccode\u003ehtml\u003c/code\u003e element for HTML documents).", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"horizontal-tb\" | \"vertical-rl\" | \"vertical-lr\" | \"sideways-rl\" | \"sideways-lr\"", ebnf: "writing-mode =\n \"horizontal-tb\" | \"vertical-rl\" | \"vertical-lr\" | \"sideways-rl\" | \"sideways-lr\"", valueType: "keyword", defaultValue: "vertical-rl", related: [], provenance: "pure", truncated: false, trueCount: 5, shown: 5, assists: [], values: [ v("horizontal-tb", "writing-mode: horizontal-tb;"), v("vertical-rl", "writing-mode: vertical-rl;"), v("vertical-lr", "writing-mode: vertical-lr;"), v("sideways-rl", "writing-mode: sideways-rl;"), v("sideways-lr", "writing-mode: sideways-lr;"), ], }, ], }, { id: "color", sigil: "12", title: "Color \u0026 Opacity", blurb: "How pigment is chosen, mixed and made translucent.", demo: "color", sampleKind: "swatch", group: "families", focus: true, gallery: false, count: 6, properties: [ { number: 182, name: "accent-color", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eaccent-color\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the \u003ca href=\"/en-US/docs/Glossary/Accent\"\u003eaccent\u003c/a\u003e color for user-interface controls generated by some elements.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | ColorType", ebnf: "accent-color =\n \"auto\" | ColorType", valueType: "keyword", defaultValue: "#c5483c", related: [], provenance: "assisted", truncated: true, trueCount: 161, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "accent-color: auto;"), v("#c5483c", "accent-color: #c5483c;"), v("#2f5fd0", "accent-color: #2f5fd0;"), v("rgb(50%, 80%, 30%, 0.75)", "accent-color: rgb(50%, 80%, 30%, 0.75);"), v("rgb(1, 0.5, 2, 0.75)", "accent-color: rgb(1, 0.5, 2, 0.75);"), v("rgb(from #c5483c 80% 65% 100%/ 2)", "accent-color: rgb(from #c5483c 80% 65% 100%/ 2);"), v("rgba(50%, 80%, 30%, 0.75)", "accent-color: rgba(50%, 80%, 30%, 0.75);"), v("rgba(1, 0.5, 2, 0.75)", "accent-color: rgba(1, 0.5, 2, 0.75);"), v("rgba(from #c5483c 80% 65% 100%/ 2)", "accent-color: rgba(from #c5483c 80% 65% 100%/ 2);"), v("hsl(45deg, 30%, 65%, 0.25)", "accent-color: hsl(45deg, 30%, 65%, 0.25);"), v("hsl(from #c5483c 135deg 65% 100%/ 2)", "accent-color: hsl(from #c5483c 135deg 65% 100%/ 2);"), v("hsla(45deg, 30%, 65%, 0.25)", "accent-color: hsla(45deg, 30%, 65%, 0.25);"), v("hsla(from #c5483c 135deg 65% 100%/ 2)", "accent-color: hsla(from #c5483c 135deg 65% 100%/ 2);"), v("hwb(from #c5483c 135deg 65% 100%/ 2)", "accent-color: hwb(from #c5483c 135deg 65% 100%/ 2);"), v("lab(from #c5483c 80% 15% 80%/ 1)", "accent-color: lab(from #c5483c 80% 15% 80%/ 1);"), v("lch(from #c5483c 80% 15% 250deg/ 1)", "accent-color: lch(from #c5483c 80% 15% 250deg/ 1);"), v("oklab(from #c5483c 80% 15% 80%/ 1)", "accent-color: oklab(from #c5483c 80% 15% 80%/ 1);"), v("oklch(from #c5483c 80% 15% 250deg/ 1)", "accent-color: oklch(from #c5483c 80% 15% 250deg/ 1);"), v("ictcp(from #c5483c 80% 15% 80%/ 1)", "accent-color: ictcp(from #c5483c 80% 15% 80%/ 1);"), v("jzazbz(from #c5483c 80% 15% 80%/ 1)", "accent-color: jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("jzczhz(from #c5483c 80% 15% 250deg/ 1)", "accent-color: jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("alpha(from #c5483c/ 0.5)", "accent-color: alpha(from #c5483c/ 0.5);"), v("color(from #c5483c --my-var 2/ 0.5)", "accent-color: color(from #c5483c --my-var 2/ 0.5);"), v("color-hdr(#c5483c 0.5, #c5483c 0.75)", "accent-color: color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("aliceblue", "accent-color: aliceblue;"), v("antiquewhite", "accent-color: antiquewhite;"), v("aqua", "accent-color: aqua;"), v("aquamarine", "accent-color: aquamarine;"), v("azure", "accent-color: azure;"), v("beige", "accent-color: beige;"), v("bisque", "accent-color: bisque;"), v("black", "accent-color: black;"), v("blanchedalmond", "accent-color: blanchedalmond;"), v("blue", "accent-color: blue;"), v("blueviolet", "accent-color: blueviolet;"), v("brown", "accent-color: brown;"), v("burlywood", "accent-color: burlywood;"), v("cadetblue", "accent-color: cadetblue;"), v("chartreuse", "accent-color: chartreuse;"), v("chocolate", "accent-color: chocolate;"), v("coral", "accent-color: coral;"), v("cornflowerblue", "accent-color: cornflowerblue;"), v("cornsilk", "accent-color: cornsilk;"), v("crimson", "accent-color: crimson;"), v("cyan", "accent-color: cyan;"), v("darkblue", "accent-color: darkblue;"), v("darkcyan", "accent-color: darkcyan;"), v("darkgoldenrod", "accent-color: darkgoldenrod;"), v("darkgray", "accent-color: darkgray;"), v("darkgreen", "accent-color: darkgreen;"), ], }, { number: 183, name: "color", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecolor\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the foreground \u003ca href=\"/en-US/docs/Web/CSS/Reference/Values/color_value\"\u003ecolor value\u003c/a\u003e of an element's text and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-decoration\"\u003etext decorations\u003c/a\u003e, and sets the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Values/color_value#currentcolor_keyword\"\u003e\u003ccode\u003ecurrentColor\u003c/code\u003e\u003c/a\u003e value. \u003ccode\u003ecurrentColor\u003c/code\u003e may be used as an indirect value on \u003cem\u003eother\u003c/em\u003e properties and is the default for other color properties, such as \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-color\"\u003e\u003ccode\u003eborder-color\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ColorType", ebnf: "color =\n ColorType", valueType: "keyword", defaultValue: "#2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("#c5483c", "color: #c5483c;"), v("#2f5fd0", "color: #2f5fd0;"), v("rgb(50%, 80%, 30%, 0.75)", "color: rgb(50%, 80%, 30%, 0.75);"), v("rgb(1, 0.5, 2, 0.75)", "color: rgb(1, 0.5, 2, 0.75);"), v("rgb(from #c5483c 80% 65% 100%/ 2)", "color: rgb(from #c5483c 80% 65% 100%/ 2);"), v("rgba(50%, 80%, 30%, 0.75)", "color: rgba(50%, 80%, 30%, 0.75);"), v("rgba(1, 0.5, 2, 0.75)", "color: rgba(1, 0.5, 2, 0.75);"), v("rgba(from #c5483c 80% 65% 100%/ 2)", "color: rgba(from #c5483c 80% 65% 100%/ 2);"), v("hsl(45deg, 30%, 65%, 0.25)", "color: hsl(45deg, 30%, 65%, 0.25);"), v("hsl(from #c5483c 135deg 65% 100%/ 2)", "color: hsl(from #c5483c 135deg 65% 100%/ 2);"), v("hsla(45deg, 30%, 65%, 0.25)", "color: hsla(45deg, 30%, 65%, 0.25);"), v("hsla(from #c5483c 135deg 65% 100%/ 2)", "color: hsla(from #c5483c 135deg 65% 100%/ 2);"), v("hwb(from #c5483c 135deg 65% 100%/ 2)", "color: hwb(from #c5483c 135deg 65% 100%/ 2);"), v("lab(from #c5483c 80% 15% 80%/ 1)", "color: lab(from #c5483c 80% 15% 80%/ 1);"), v("lch(from #c5483c 80% 15% 250deg/ 1)", "color: lch(from #c5483c 80% 15% 250deg/ 1);"), v("oklab(from #c5483c 80% 15% 80%/ 1)", "color: oklab(from #c5483c 80% 15% 80%/ 1);"), v("oklch(from #c5483c 80% 15% 250deg/ 1)", "color: oklch(from #c5483c 80% 15% 250deg/ 1);"), v("ictcp(from #c5483c 80% 15% 80%/ 1)", "color: ictcp(from #c5483c 80% 15% 80%/ 1);"), v("jzazbz(from #c5483c 80% 15% 80%/ 1)", "color: jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("jzczhz(from #c5483c 80% 15% 250deg/ 1)", "color: jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("alpha(from #c5483c/ 0.5)", "color: alpha(from #c5483c/ 0.5);"), v("color(from #c5483c --my-var 2/ 0.5)", "color: color(from #c5483c --my-var 2/ 0.5);"), v("color-hdr(#c5483c 0.5, #c5483c 0.75)", "color: color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("aliceblue", "color: aliceblue;"), v("antiquewhite", "color: antiquewhite;"), v("aqua", "color: aqua;"), v("aquamarine", "color: aquamarine;"), v("azure", "color: azure;"), v("beige", "color: beige;"), v("bisque", "color: bisque;"), v("black", "color: black;"), v("blanchedalmond", "color: blanchedalmond;"), v("blue", "color: blue;"), v("blueviolet", "color: blueviolet;"), v("brown", "color: brown;"), v("burlywood", "color: burlywood;"), v("cadetblue", "color: cadetblue;"), v("chartreuse", "color: chartreuse;"), v("chocolate", "color: chocolate;"), v("coral", "color: coral;"), v("cornflowerblue", "color: cornflowerblue;"), v("cornsilk", "color: cornsilk;"), v("crimson", "color: crimson;"), v("cyan", "color: cyan;"), v("darkblue", "color: darkblue;"), v("darkcyan", "color: darkcyan;"), v("darkgoldenrod", "color: darkgoldenrod;"), v("darkgray", "color: darkgray;"), v("darkgreen", "color: darkgreen;"), v("darkgrey", "color: darkgrey;"), ], }, { number: 184, name: "color-scheme", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecolor-scheme\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property allows an element to indicate which color schemes it can comfortably be rendered in. User agents change the following aspects of the UI chrome to match the used color scheme:", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | ColorSchemePropItem , { ColorSchemePropItem } , [ \"only\" ] | \"only\" , ColorSchemePropItem , { ColorSchemePropItem }", ebnf: "color-scheme =\n \"normal\" | ColorSchemePropItem , { ColorSchemePropItem } , [ \"only\" ] | \"only\" , ColorSchemePropItem , { ColorSchemePropItem }", valueType: "keyword", defaultValue: "light only", related: [], provenance: "assisted", truncated: false, trueCount: 13, shown: 13, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }], values: [ v("normal", "color-scheme: normal;"), v("light only", "color-scheme: light only;"), v("light", "color-scheme: light;"), v("dark only", "color-scheme: dark only;"), v("dark", "color-scheme: dark;"), v("my-ident only", "color-scheme: my-ident only;"), v("my-ident", "color-scheme: my-ident;"), v("tag-a only", "color-scheme: tag-a only;"), v("tag-a", "color-scheme: tag-a;"), v("only light", "color-scheme: only light;"), v("only dark", "color-scheme: only dark;"), v("only my-ident", "color-scheme: only my-ident;"), v("only tag-a", "color-scheme: only tag-a;"), ], }, { number: 185, name: "forced-color-adjust", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eforced-color-adjust\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property allows authors to opt certain elements out of forced colors mode. This then restores the control of those values to CSS.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"none\" | \"preserve-parent-color\"", ebnf: "forced-color-adjust =\n \"auto\" | \"none\" | \"preserve-parent-color\"", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: false, trueCount: 3, shown: 3, assists: [], values: [ v("auto", "forced-color-adjust: auto;"), v("none", "forced-color-adjust: none;"), v("preserve-parent-color", "forced-color-adjust: preserve-parent-color;"), ], }, { number: 186, name: "opacity", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eopacity\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "OpacityValueType", ebnf: "opacity =\n OpacityValueType", valueType: "keyword", defaultValue: "2", related: [], provenance: "assisted", truncated: false, trueCount: 11, shown: 11, assists: [{ type: "\u003cnumber [0,∞]\u003e", samples: ["1", "2", "0.5", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("1", "opacity: 1;"), v("2", "opacity: 2;"), v("0.5", "opacity: 0.5;"), v("0.75", "opacity: 0.75;"), v("0.25", "opacity: 0.25;"), v("50%", "opacity: 50%;"), v("80%", "opacity: 80%;"), v("30%", "opacity: 30%;"), v("65%", "opacity: 65%;"), v("15%", "opacity: 15%;"), v("100%", "opacity: 100%;"), ], }, { number: 187, name: "print-color-adjust", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eprint-color-adjust\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets what, if anything, the \u003ca href=\"/en-US/docs/Glossary/User_agent\"\u003euser agent\u003c/a\u003e may do to optimize the appearance of the element on the output device. By default, the browser is allowed to make any adjustments to the element's appearance it determines to be necessary and prudent given the type and capabilities of the output device.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"economy\" | \"exact\"", ebnf: "print-color-adjust =\n \"economy\" | \"exact\"", valueType: "keyword", defaultValue: "exact", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("economy", "print-color-adjust: economy;"), v("exact", "print-color-adjust: exact;"), ], }, ], }, { id: "backgrounds", sigil: "13", title: "Backgrounds", blurb: "Layered fills behind content: colours, images, gradients.", demo: "generic", sampleKind: "box", group: "families", focus: false, gallery: false, count: 10, properties: [ { number: 188, name: "background", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebackground\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets all background style properties at once, such as color, image, origin, size, and repeat method.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BgImageType , \"center\" , \"/\" , \"cover\" , \"no-repeat\" , \"fixed\" , \"padding-box\" , hex_color_type\n | BgImageType , \"top left\" , \"/\" , \"contain\" , \"repeat-x\" , \"scroll\"\n | BgImageType , \"center\" , \"no-repeat\"\n | hex_color_type , BgImageType\n | BgImageType\n | hex_color_type", ebnf: "background =\n BgImageType , \"center\" , \"/\" , \"cover\" , \"no-repeat\" , \"fixed\" , \"padding-box\" , hex_color_type\n | BgImageType , \"top left\" , \"/\" , \"contain\" , \"repeat-x\" , \"scroll\"\n | BgImageType , \"center\" , \"no-repeat\"\n | hex_color_type , BgImageType\n | BgImageType\n | hex_color_type", valueType: "function", defaultValue: "url(assets/photo.jpg) center/ cover no-repeat fixed padding-box #2f5fd0", related: [], provenance: "assisted", truncated: false, trueCount: 93, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cresolution\u003e", samples: ["96dpi", "2x", "300dpi"] }, { type: "\u003cstring\u003e", samples: ["\"Specimen\"", "\"Aa\""] }, { type: "ConicGradientFn", samples: ["conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c)"] }, { type: "LinearGradientFn", samples: ["linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)"] }, { type: "RadialGradientFn", samples: ["radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)"] }, { type: "RepeatingConicGradientFn", samples: ["repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg)"] }, { type: "RepeatingLinearGradientFn", samples: ["repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)"] }, { type: "RepeatingRadialGradientFn", samples: ["repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px)"] }, { type: "UrlType", samples: ["url(assets/photo.jpg)"] }], values: [ v("url(assets/photo.jpg) center/ cover no-repeat fixed padding-box #c5483c", "background: url(assets/photo.jpg) center/ cover no-repeat fixed padding-box #c5483c;"), v("url(assets/photo.jpg) center/ cover no-repeat fixed padding-box #2f5fd0", "background: url(assets/photo.jpg) center/ cover no-repeat fixed padding-box #2f5fd0;"), v("image(ltr url(assets/photo.jpg)) center/ cover no-repeat fixed padding-box #c5483c", "background: image(ltr url(assets/photo.jpg)) center/ cover no-repeat fixed padding-box #c5483c;"), v("image(ltr url(assets/photo.jpg)) center/ cover no-repeat fixed padding-box #2f5fd0", "background: image(ltr url(assets/photo.jpg)) center/ cover no-repeat fixed padding-box #2f5fd0;"), v("image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\")) center/ cover no-repeat fixed padding-box #c5483c", "background: image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\")) center/ cover no-repeat fixed padding-box #c5483c;"), v("image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\")) center/ cover no-repeat fixed padding-box #2f5fd0", "background: image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\")) center/ cover no-repeat fixed padding-box #2f5fd0;"), v("cross-fade(url(assets/photo.jpg) 30%) center/ cover no-repeat fixed padding-box #c5483c", "background: cross-fade(url(assets/photo.jpg) 30%) center/ cover no-repeat fixed padding-box #c5483c;"), v("cross-fade(url(assets/photo.jpg) 30%) center/ cover no-repeat fixed padding-box #2f5fd0", "background: cross-fade(url(assets/photo.jpg) 30%) center/ cover no-repeat fixed padding-box #2f5fd0;"), v("element(#alpha) center/ cover no-repeat fixed padding-box #c5483c", "background: element(#alpha) center/ cover no-repeat fixed padding-box #c5483c;"), v("element(#alpha) center/ cover no-repeat fixed padding-box #2f5fd0", "background: element(#alpha) center/ cover no-repeat fixed padding-box #2f5fd0;"), v("linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0) center/ cover no-repeat fixed padding-box #c5483c", "background: linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0) center/ cover no-repeat fixed padding-box #c5483c;"), v("linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0) center/ cover no-repeat fixed padding-box #2f5fd0", "background: linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0) center/ cover no-repeat fixed padding-box #2f5fd0;"), v("repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px) center/ cover no-repeat fixed padding-box #c5483c", "background: repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px) center/ cover no-repeat fixed padding-box #c5483c;"), v("repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px) center/ cover no-repeat fixed padding-box #2f5fd0", "background: repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px) center/ cover no-repeat fixed padding-box #2f5fd0;"), v("radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0) center/ cover no-repeat fixed padding-box #c5483c", "background: radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0) center/ cover no-repeat fixed padding-box #c5483c;"), v("radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0) center/ cover no-repeat fixed padding-box #2f5fd0", "background: radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0) center/ cover no-repeat fixed padding-box #2f5fd0;"), v("repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px) center/ cover no-repeat fixed padding-box #c5483c", "background: repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px) center/ cover no-repeat fixed padding-box #c5483c;"), v("repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px) center/ cover no-repeat fixed padding-box #2f5fd0", "background: repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px) center/ cover no-repeat fixed padding-box #2f5fd0;"), v("conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c) center/ cover no-repeat fixed padding-box #c5483c", "background: conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c) center/ cover no-repeat fixed padding-box #c5483c;"), v("conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c) center/ cover no-repeat fixed padding-box #2f5fd0", "background: conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c) center/ cover no-repeat fixed padding-box #2f5fd0;"), v("repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg) center/ cover no-repeat fixed padding-box #c5483c", "background: repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg) center/ cover no-repeat fixed padding-box #c5483c;"), v("repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg) center/ cover no-repeat fixed padding-box #2f5fd0", "background: repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg) center/ cover no-repeat fixed padding-box #2f5fd0;"), v("light-dark(url(assets/photo.jpg), url(assets/photo.jpg)) center/ cover no-repeat fixed padding-box #c5483c", "background: light-dark(url(assets/photo.jpg), url(assets/photo.jpg)) center/ cover no-repeat fixed padding-box #c5483c;"), v("light-dark(url(assets/photo.jpg), url(assets/photo.jpg)) center/ cover no-repeat fixed padding-box #2f5fd0", "background: light-dark(url(assets/photo.jpg), url(assets/photo.jpg)) center/ cover no-repeat fixed padding-box #2f5fd0;"), v("none center/ cover no-repeat fixed padding-box #c5483c", "background: none center/ cover no-repeat fixed padding-box #c5483c;"), v("none center/ cover no-repeat fixed padding-box #2f5fd0", "background: none center/ cover no-repeat fixed padding-box #2f5fd0;"), v("url(assets/photo.jpg) top left/ contain repeat-x scroll", "background: url(assets/photo.jpg) top left/ contain repeat-x scroll;"), v("image(ltr url(assets/photo.jpg)) top left/ contain repeat-x scroll", "background: image(ltr url(assets/photo.jpg)) top left/ contain repeat-x scroll;"), v("image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\")) top left/ contain repeat-x scroll", "background: image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\")) top left/ contain repeat-x scroll;"), v("cross-fade(url(assets/photo.jpg) 30%) top left/ contain repeat-x scroll", "background: cross-fade(url(assets/photo.jpg) 30%) top left/ contain repeat-x scroll;"), v("element(#alpha) top left/ contain repeat-x scroll", "background: element(#alpha) top left/ contain repeat-x scroll;"), v("linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0) top left/ contain repeat-x scroll", "background: linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0) top left/ contain repeat-x scroll;"), v("repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px) top left/ contain repeat-x scroll", "background: repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px) top left/ contain repeat-x scroll;"), v("radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0) top left/ contain repeat-x scroll", "background: radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0) top left/ contain repeat-x scroll;"), v("repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px) top left/ contain repeat-x scroll", "background: repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px) top left/ contain repeat-x scroll;"), v("conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c) top left/ contain repeat-x scroll", "background: conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c) top left/ contain repeat-x scroll;"), v("repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg) top left/ contain repeat-x scroll", "background: repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg) top left/ contain repeat-x scroll;"), v("light-dark(url(assets/photo.jpg), url(assets/photo.jpg)) top left/ contain repeat-x scroll", "background: light-dark(url(assets/photo.jpg), url(assets/photo.jpg)) top left/ contain repeat-x scroll;"), v("none top left/ contain repeat-x scroll", "background: none top left/ contain repeat-x scroll;"), v("url(assets/photo.jpg) center no-repeat", "background: url(assets/photo.jpg) center no-repeat;"), v("image(ltr url(assets/photo.jpg)) center no-repeat", "background: image(ltr url(assets/photo.jpg)) center no-repeat;"), v("image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\")) center no-repeat", "background: image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\")) center no-repeat;"), v("cross-fade(url(assets/photo.jpg) 30%) center no-repeat", "background: cross-fade(url(assets/photo.jpg) 30%) center no-repeat;"), v("element(#alpha) center no-repeat", "background: element(#alpha) center no-repeat;"), v("linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0) center no-repeat", "background: linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0) center no-repeat;"), v("repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px) center no-repeat", "background: repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px) center no-repeat;"), v("radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0) center no-repeat", "background: radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0) center no-repeat;"), v("repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px) center no-repeat", "background: repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px) center no-repeat;"), v("conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c) center no-repeat", "background: conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c) center no-repeat;"), v("repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg) center no-repeat", "background: repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg) center no-repeat;"), ], }, { number: 189, name: "background-attachment", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebackground-attachment\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets whether a background image's position is fixed within the \u003ca href=\"/en-US/docs/Glossary/Viewport\"\u003eviewport\u003c/a\u003e, or scrolls with its containing block.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "AttachmentType , { \",\" , AttachmentType }", ebnf: "background-attachment =\n AttachmentType , { \",\" , AttachmentType }", valueType: "keyword", defaultValue: "fixed", related: [], provenance: "pure", truncated: false, trueCount: 3, shown: 3, assists: [], values: [ v("scroll", "background-attachment: scroll;"), v("fixed", "background-attachment: fixed;"), v("local", "background-attachment: local;"), ], }, { number: 190, name: "background-blend-mode", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebackground-blend-mode\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets how an element's background images should blend with each other and with the element's background color.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BlendModeType , { \",\" , BlendModeType }", ebnf: "background-blend-mode =\n BlendModeType , { \",\" , BlendModeType }", valueType: "keyword", defaultValue: "darken", related: [], provenance: "pure", truncated: false, trueCount: 16, shown: 16, assists: [], values: [ v("normal", "background-blend-mode: normal;"), v("darken", "background-blend-mode: darken;"), v("multiply", "background-blend-mode: multiply;"), v("color-burn", "background-blend-mode: color-burn;"), v("lighten", "background-blend-mode: lighten;"), v("screen", "background-blend-mode: screen;"), v("color-dodge", "background-blend-mode: color-dodge;"), v("overlay", "background-blend-mode: overlay;"), v("soft-light", "background-blend-mode: soft-light;"), v("hard-light", "background-blend-mode: hard-light;"), v("difference", "background-blend-mode: difference;"), v("exclusion", "background-blend-mode: exclusion;"), v("hue", "background-blend-mode: hue;"), v("saturation", "background-blend-mode: saturation;"), v("color", "background-blend-mode: color;"), v("luminosity", "background-blend-mode: luminosity;"), ], }, { number: 191, name: "background-clip", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebackground-clip\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets whether an element's background extends underneath its border box, padding box, or content box.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BgClipType , { \",\" , BgClipType }", ebnf: "background-clip =\n BgClipType , { \",\" , BgClipType }", valueType: "keyword", defaultValue: "padding-box", related: [], provenance: "pure", truncated: false, trueCount: 7, shown: 7, assists: [], values: [ v("content-box", "background-clip: content-box;"), v("padding-box", "background-clip: padding-box;"), v("border-box", "background-clip: border-box;"), v("border-area text", "background-clip: border-area text;"), v("border-area", "background-clip: border-area;"), v("text border-area", "background-clip: text border-area;"), v("text", "background-clip: text;"), ], }, { number: 192, name: "background-color", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebackground-color\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the background color of an element.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ColorType", ebnf: "background-color =\n ColorType", valueType: "keyword", defaultValue: "#2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("#c5483c", "background-color: #c5483c;"), v("#2f5fd0", "background-color: #2f5fd0;"), v("rgb(50%, 80%, 30%, 0.75)", "background-color: rgb(50%, 80%, 30%, 0.75);"), v("rgb(1, 0.5, 2, 0.75)", "background-color: rgb(1, 0.5, 2, 0.75);"), v("rgb(from #c5483c 80% 65% 100%/ 2)", "background-color: rgb(from #c5483c 80% 65% 100%/ 2);"), v("rgba(50%, 80%, 30%, 0.75)", "background-color: rgba(50%, 80%, 30%, 0.75);"), v("rgba(1, 0.5, 2, 0.75)", "background-color: rgba(1, 0.5, 2, 0.75);"), v("rgba(from #c5483c 80% 65% 100%/ 2)", "background-color: rgba(from #c5483c 80% 65% 100%/ 2);"), v("hsl(45deg, 30%, 65%, 0.25)", "background-color: hsl(45deg, 30%, 65%, 0.25);"), v("hsl(from #c5483c 135deg 65% 100%/ 2)", "background-color: hsl(from #c5483c 135deg 65% 100%/ 2);"), v("hsla(45deg, 30%, 65%, 0.25)", "background-color: hsla(45deg, 30%, 65%, 0.25);"), v("hsla(from #c5483c 135deg 65% 100%/ 2)", "background-color: hsla(from #c5483c 135deg 65% 100%/ 2);"), v("hwb(from #c5483c 135deg 65% 100%/ 2)", "background-color: hwb(from #c5483c 135deg 65% 100%/ 2);"), v("lab(from #c5483c 80% 15% 80%/ 1)", "background-color: lab(from #c5483c 80% 15% 80%/ 1);"), v("lch(from #c5483c 80% 15% 250deg/ 1)", "background-color: lch(from #c5483c 80% 15% 250deg/ 1);"), v("oklab(from #c5483c 80% 15% 80%/ 1)", "background-color: oklab(from #c5483c 80% 15% 80%/ 1);"), v("oklch(from #c5483c 80% 15% 250deg/ 1)", "background-color: oklch(from #c5483c 80% 15% 250deg/ 1);"), v("ictcp(from #c5483c 80% 15% 80%/ 1)", "background-color: ictcp(from #c5483c 80% 15% 80%/ 1);"), v("jzazbz(from #c5483c 80% 15% 80%/ 1)", "background-color: jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("jzczhz(from #c5483c 80% 15% 250deg/ 1)", "background-color: jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("alpha(from #c5483c/ 0.5)", "background-color: alpha(from #c5483c/ 0.5);"), v("color(from #c5483c --my-var 2/ 0.5)", "background-color: color(from #c5483c --my-var 2/ 0.5);"), v("color-hdr(#c5483c 0.5, #c5483c 0.75)", "background-color: color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("aliceblue", "background-color: aliceblue;"), v("antiquewhite", "background-color: antiquewhite;"), v("aqua", "background-color: aqua;"), v("aquamarine", "background-color: aquamarine;"), v("azure", "background-color: azure;"), v("beige", "background-color: beige;"), v("bisque", "background-color: bisque;"), v("black", "background-color: black;"), v("blanchedalmond", "background-color: blanchedalmond;"), v("blue", "background-color: blue;"), v("blueviolet", "background-color: blueviolet;"), v("brown", "background-color: brown;"), v("burlywood", "background-color: burlywood;"), v("cadetblue", "background-color: cadetblue;"), v("chartreuse", "background-color: chartreuse;"), v("chocolate", "background-color: chocolate;"), v("coral", "background-color: coral;"), v("cornflowerblue", "background-color: cornflowerblue;"), v("cornsilk", "background-color: cornsilk;"), v("crimson", "background-color: crimson;"), v("cyan", "background-color: cyan;"), v("darkblue", "background-color: darkblue;"), v("darkcyan", "background-color: darkcyan;"), v("darkgoldenrod", "background-color: darkgoldenrod;"), v("darkgray", "background-color: darkgray;"), v("darkgreen", "background-color: darkgreen;"), v("darkgrey", "background-color: darkgrey;"), ], }, { number: 193, name: "background-image", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebackground-image\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets one or more background images on an element.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BgImageType , { \",\" , BgImageType }", ebnf: "background-image =\n BgImageType , { \",\" , BgImageType }", valueType: "function", defaultValue: "image(ltr url(assets/photo.jpg))", related: [], provenance: "assisted", truncated: false, trueCount: 13, shown: 13, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cresolution\u003e", samples: ["96dpi", "2x", "300dpi"] }, { type: "\u003cstring\u003e", samples: ["\"Specimen\"", "\"Aa\""] }, { type: "ConicGradientFn", samples: ["conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c)"] }, { type: "LinearGradientFn", samples: ["linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)"] }, { type: "RadialGradientFn", samples: ["radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)"] }, { type: "RepeatingConicGradientFn", samples: ["repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg)"] }, { type: "RepeatingLinearGradientFn", samples: ["repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)"] }, { type: "RepeatingRadialGradientFn", samples: ["repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px)"] }, { type: "UrlType", samples: ["url(assets/photo.jpg)"] }], values: [ v("url(assets/photo.jpg)", "background-image: url(assets/photo.jpg);"), v("image(ltr url(assets/photo.jpg))", "background-image: image(ltr url(assets/photo.jpg));"), v("image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\"))", "background-image: image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\"));"), v("cross-fade(url(assets/photo.jpg) 30%)", "background-image: cross-fade(url(assets/photo.jpg) 30%);"), v("element(#alpha)", "background-image: element(#alpha);"), v("linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)", "background-image: linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0);"), v("repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)", "background-image: repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px);"), v("radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)", "background-image: radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0);"), v("repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px)", "background-image: repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px);"), v("conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c)", "background-image: conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c);"), v("repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg)", "background-image: repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg);"), v("light-dark(url(assets/photo.jpg), url(assets/photo.jpg))", "background-image: light-dark(url(assets/photo.jpg), url(assets/photo.jpg));"), v("none", "background-image: none;"), ], }, { number: 194, name: "background-origin", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebackground-origin\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the background's origin: from the border start, inside the border, or inside the padding.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "VisualBoxType , { \",\" , VisualBoxType }", ebnf: "background-origin =\n VisualBoxType , { \",\" , VisualBoxType }", valueType: "keyword", defaultValue: "padding-box", related: [], provenance: "pure", truncated: false, trueCount: 3, shown: 3, assists: [], values: [ v("content-box", "background-origin: content-box;"), v("padding-box", "background-origin: padding-box;"), v("border-box", "background-origin: border-box;"), ], }, { number: 195, name: "background-position", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebackground-position\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the initial position for each background image. The position is relative to the position layer set by \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/background-origin\"\u003e\u003ccode\u003ebackground-origin\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BgPositionType , { \",\" , BgPositionType }", ebnf: "background-position =\n BgPositionType , { \",\" , BgPositionType }", valueType: "keyword", defaultValue: "center", related: [], provenance: "assisted", truncated: true, trueCount: 139, shown: 50, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("left", "background-position: left;"), v("center", "background-position: center;"), v("right", "background-position: right;"), v("top", "background-position: top;"), v("bottom", "background-position: bottom;"), v("x-start", "background-position: x-start;"), v("x-end", "background-position: x-end;"), v("y-start", "background-position: y-start;"), v("y-end", "background-position: y-end;"), v("block-start", "background-position: block-start;"), v("block-end", "background-position: block-end;"), v("inline-start", "background-position: inline-start;"), v("inline-end", "background-position: inline-end;"), v("24px", "background-position: 24px;"), v("48px", "background-position: 48px;"), v("8px", "background-position: 8px;"), v("16px", "background-position: 16px;"), v("64px", "background-position: 64px;"), v("50%", "background-position: 50%;"), v("80%", "background-position: 80%;"), v("30%", "background-position: 30%;"), v("65%", "background-position: 65%;"), v("15%", "background-position: 15%;"), v("100%", "background-position: 100%;"), v("calc(24px)", "background-position: calc(24px);"), v("clamp(24px, 2em, 48px)", "background-position: clamp(24px, 2em, 48px);"), v("min(24px)", "background-position: min(24px);"), v("max(24px)", "background-position: max(24px);"), v("round(nearest, 24px, 2em)", "background-position: round(nearest, 24px, 2em);"), v("abs(24px)", "background-position: abs(24px);"), v("var(--my-var, 48px)", "background-position: var(--my-var, 48px);"), v("env(my-ident, 48px)", "background-position: env(my-ident, 48px);"), v("left top", "background-position: left top;"), v("left center", "background-position: left center;"), v("left bottom", "background-position: left bottom;"), v("left y-start", "background-position: left y-start;"), v("left y-end", "background-position: left y-end;"), v("center top", "background-position: center top;"), v("center center", "background-position: center center;"), v("center bottom", "background-position: center bottom;"), v("center y-start", "background-position: center y-start;"), v("center y-end", "background-position: center y-end;"), v("right top", "background-position: right top;"), v("right center", "background-position: right center;"), v("right bottom", "background-position: right bottom;"), v("right y-start", "background-position: right y-start;"), v("right y-end", "background-position: right y-end;"), v("x-start top", "background-position: x-start top;"), v("x-start center", "background-position: x-start center;"), v("x-start bottom", "background-position: x-start bottom;"), ], }, { number: 196, name: "background-repeat", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebackground-repeat\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "RepeatStyleType , { \",\" , RepeatStyleType }", ebnf: "background-repeat =\n RepeatStyleType , { \",\" , RepeatStyleType }", valueType: "keyword", defaultValue: "repeat-y", related: [], provenance: "pure", truncated: false, trueCount: 8, shown: 8, assists: [], values: [ v("repeat-x", "background-repeat: repeat-x;"), v("repeat-y", "background-repeat: repeat-y;"), v("repeat-block", "background-repeat: repeat-block;"), v("repeat-inline", "background-repeat: repeat-inline;"), v("repeat", "background-repeat: repeat;"), v("space", "background-repeat: space;"), v("round", "background-repeat: round;"), v("no-repeat", "background-repeat: no-repeat;"), ], }, { number: 197, name: "background-size", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebackground-size\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BgSizeType , { \",\" , BgSizeType }", ebnf: "background-size =\n BgSizeType , { \",\" , BgSizeType }", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 21, shown: 21, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "background-size: 24px;"), v("48px", "background-size: 48px;"), v("8px", "background-size: 8px;"), v("16px", "background-size: 16px;"), v("64px", "background-size: 64px;"), v("50%", "background-size: 50%;"), v("80%", "background-size: 80%;"), v("30%", "background-size: 30%;"), v("65%", "background-size: 65%;"), v("15%", "background-size: 15%;"), v("100%", "background-size: 100%;"), v("calc(24px)", "background-size: calc(24px);"), v("clamp(24px, 2em, 48px)", "background-size: clamp(24px, 2em, 48px);"), v("min(24px)", "background-size: min(24px);"), v("max(24px)", "background-size: max(24px);"), v("round(nearest, 24px, 2em)", "background-size: round(nearest, 24px, 2em);"), v("abs(24px)", "background-size: abs(24px);"), v("env(my-ident, 48px)", "background-size: env(my-ident, 48px);"), v("auto", "background-size: auto;"), v("cover", "background-size: cover;"), v("contain", "background-size: contain;"), ], }, ], }, { id: "borders", sigil: "14", title: "Borders, Outlines \u0026 Radius", blurb: "Edges of the box: style, width, colour, rounded corners.", demo: "generic", sampleKind: "box", group: "families", focus: false, gallery: false, count: 83, properties: [ { number: 198, name: "border", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets an element's border. It sets the values of \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-width\"\u003e\u003ccode\u003eborder-width\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-style\"\u003e\u003ccode\u003eborder-style\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-color\"\u003e\u003ccode\u003eborder-color\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LineWidthType , [ LineStyleType , [ ColorType ] | ColorType , [ LineStyleType ] ]\n | LineStyleType , [ LineWidthType , [ ColorType ] | ColorType , [ LineWidthType ] ]\n | ColorType , [ LineWidthType , [ LineStyleType ] | LineStyleType , [ LineWidthType ] ]", ebnf: "border =\n LineWidthType , [ LineStyleType , [ ColorType ] | ColorType , [ LineStyleType ] ]\n | LineStyleType , [ LineWidthType , [ ColorType ] | ColorType , [ LineWidthType ] ]\n | ColorType , [ LineWidthType , [ LineStyleType ] | LineStyleType , [ LineWidthType ] ]", valueType: "length", defaultValue: "24px solid #2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 320, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px solid #c5483c", "border: 24px solid #c5483c;"), v("24px solid #2f5fd0", "border: 24px solid #2f5fd0;"), v("24px solid rgb(50%, 80%, 30%, 0.75)", "border: 24px solid rgb(50%, 80%, 30%, 0.75);"), v("24px solid rgb(1, 0.5, 2, 0.75)", "border: 24px solid rgb(1, 0.5, 2, 0.75);"), v("24px solid rgb(from #c5483c 80% 65% 100%/ 2)", "border: 24px solid rgb(from #c5483c 80% 65% 100%/ 2);"), v("24px solid rgba(50%, 80%, 30%, 0.75)", "border: 24px solid rgba(50%, 80%, 30%, 0.75);"), v("24px solid rgba(1, 0.5, 2, 0.75)", "border: 24px solid rgba(1, 0.5, 2, 0.75);"), v("24px solid rgba(from #c5483c 80% 65% 100%/ 2)", "border: 24px solid rgba(from #c5483c 80% 65% 100%/ 2);"), v("24px solid hsl(45deg, 30%, 65%, 0.25)", "border: 24px solid hsl(45deg, 30%, 65%, 0.25);"), v("24px solid hsl(from #c5483c 135deg 65% 100%/ 2)", "border: 24px solid hsl(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid hsla(45deg, 30%, 65%, 0.25)", "border: 24px solid hsla(45deg, 30%, 65%, 0.25);"), v("24px solid hsla(from #c5483c 135deg 65% 100%/ 2)", "border: 24px solid hsla(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid hwb(from #c5483c 135deg 65% 100%/ 2)", "border: 24px solid hwb(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid lab(from #c5483c 80% 15% 80%/ 1)", "border: 24px solid lab(from #c5483c 80% 15% 80%/ 1);"), v("24px solid lch(from #c5483c 80% 15% 250deg/ 1)", "border: 24px solid lch(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid oklab(from #c5483c 80% 15% 80%/ 1)", "border: 24px solid oklab(from #c5483c 80% 15% 80%/ 1);"), v("24px solid oklch(from #c5483c 80% 15% 250deg/ 1)", "border: 24px solid oklch(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid ictcp(from #c5483c 80% 15% 80%/ 1)", "border: 24px solid ictcp(from #c5483c 80% 15% 80%/ 1);"), v("24px solid jzazbz(from #c5483c 80% 15% 80%/ 1)", "border: 24px solid jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("24px solid jzczhz(from #c5483c 80% 15% 250deg/ 1)", "border: 24px solid jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid alpha(from #c5483c/ 0.5)", "border: 24px solid alpha(from #c5483c/ 0.5);"), v("24px solid color(from #c5483c --my-var 2/ 0.5)", "border: 24px solid color(from #c5483c --my-var 2/ 0.5);"), v("24px solid color-hdr(#c5483c 0.5, #c5483c 0.75)", "border: 24px solid color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("24px solid aliceblue", "border: 24px solid aliceblue;"), v("24px solid antiquewhite", "border: 24px solid antiquewhite;"), v("24px solid aqua", "border: 24px solid aqua;"), v("24px solid aquamarine", "border: 24px solid aquamarine;"), v("24px solid azure", "border: 24px solid azure;"), v("24px solid beige", "border: 24px solid beige;"), v("24px solid bisque", "border: 24px solid bisque;"), v("24px solid black", "border: 24px solid black;"), v("24px solid blanchedalmond", "border: 24px solid blanchedalmond;"), v("24px solid blue", "border: 24px solid blue;"), v("24px solid blueviolet", "border: 24px solid blueviolet;"), v("24px solid brown", "border: 24px solid brown;"), v("24px solid burlywood", "border: 24px solid burlywood;"), v("24px solid cadetblue", "border: 24px solid cadetblue;"), v("24px solid chartreuse", "border: 24px solid chartreuse;"), v("24px solid chocolate", "border: 24px solid chocolate;"), v("24px solid coral", "border: 24px solid coral;"), v("24px solid cornflowerblue", "border: 24px solid cornflowerblue;"), v("24px solid cornsilk", "border: 24px solid cornsilk;"), v("24px solid crimson", "border: 24px solid crimson;"), v("24px solid cyan", "border: 24px solid cyan;"), v("24px solid darkblue", "border: 24px solid darkblue;"), v("24px solid darkcyan", "border: 24px solid darkcyan;"), v("24px solid darkgoldenrod", "border: 24px solid darkgoldenrod;"), v("24px solid darkgray", "border: 24px solid darkgray;"), v("24px solid darkgreen", "border: 24px solid darkgreen;"), v("24px solid darkgrey", "border: 24px solid darkgrey;"), ], }, { number: 199, name: "border-block", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-block\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property is a \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e for setting the individual logical block border property values in a single place in the style sheet.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BorderBlockStartProp", ebnf: "border-block =\n BorderBlockStartProp", valueType: "length", defaultValue: "24px solid #2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px solid #c5483c", "border-block: 24px solid #c5483c;"), v("24px solid #2f5fd0", "border-block: 24px solid #2f5fd0;"), v("24px solid rgb(50%, 80%, 30%, 0.75)", "border-block: 24px solid rgb(50%, 80%, 30%, 0.75);"), v("24px solid rgb(1, 0.5, 2, 0.75)", "border-block: 24px solid rgb(1, 0.5, 2, 0.75);"), v("24px solid rgb(from #c5483c 80% 65% 100%/ 2)", "border-block: 24px solid rgb(from #c5483c 80% 65% 100%/ 2);"), v("24px solid rgba(50%, 80%, 30%, 0.75)", "border-block: 24px solid rgba(50%, 80%, 30%, 0.75);"), v("24px solid rgba(1, 0.5, 2, 0.75)", "border-block: 24px solid rgba(1, 0.5, 2, 0.75);"), v("24px solid rgba(from #c5483c 80% 65% 100%/ 2)", "border-block: 24px solid rgba(from #c5483c 80% 65% 100%/ 2);"), v("24px solid hsl(45deg, 30%, 65%, 0.25)", "border-block: 24px solid hsl(45deg, 30%, 65%, 0.25);"), v("24px solid hsl(from #c5483c 135deg 65% 100%/ 2)", "border-block: 24px solid hsl(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid hsla(45deg, 30%, 65%, 0.25)", "border-block: 24px solid hsla(45deg, 30%, 65%, 0.25);"), v("24px solid hsla(from #c5483c 135deg 65% 100%/ 2)", "border-block: 24px solid hsla(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid hwb(from #c5483c 135deg 65% 100%/ 2)", "border-block: 24px solid hwb(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid lab(from #c5483c 80% 15% 80%/ 1)", "border-block: 24px solid lab(from #c5483c 80% 15% 80%/ 1);"), v("24px solid lch(from #c5483c 80% 15% 250deg/ 1)", "border-block: 24px solid lch(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid oklab(from #c5483c 80% 15% 80%/ 1)", "border-block: 24px solid oklab(from #c5483c 80% 15% 80%/ 1);"), v("24px solid oklch(from #c5483c 80% 15% 250deg/ 1)", "border-block: 24px solid oklch(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid ictcp(from #c5483c 80% 15% 80%/ 1)", "border-block: 24px solid ictcp(from #c5483c 80% 15% 80%/ 1);"), v("24px solid jzazbz(from #c5483c 80% 15% 80%/ 1)", "border-block: 24px solid jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("24px solid jzczhz(from #c5483c 80% 15% 250deg/ 1)", "border-block: 24px solid jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid alpha(from #c5483c/ 0.5)", "border-block: 24px solid alpha(from #c5483c/ 0.5);"), v("24px solid color(from #c5483c --my-var 2/ 0.5)", "border-block: 24px solid color(from #c5483c --my-var 2/ 0.5);"), v("24px solid color-hdr(#c5483c 0.5, #c5483c 0.75)", "border-block: 24px solid color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("24px solid aliceblue", "border-block: 24px solid aliceblue;"), v("24px solid antiquewhite", "border-block: 24px solid antiquewhite;"), v("24px solid aqua", "border-block: 24px solid aqua;"), v("24px solid aquamarine", "border-block: 24px solid aquamarine;"), v("24px solid azure", "border-block: 24px solid azure;"), v("24px solid beige", "border-block: 24px solid beige;"), v("24px solid bisque", "border-block: 24px solid bisque;"), v("24px solid black", "border-block: 24px solid black;"), v("24px solid blanchedalmond", "border-block: 24px solid blanchedalmond;"), v("24px solid blue", "border-block: 24px solid blue;"), v("24px solid blueviolet", "border-block: 24px solid blueviolet;"), v("24px solid brown", "border-block: 24px solid brown;"), v("24px solid burlywood", "border-block: 24px solid burlywood;"), v("24px solid cadetblue", "border-block: 24px solid cadetblue;"), v("24px solid chartreuse", "border-block: 24px solid chartreuse;"), v("24px solid chocolate", "border-block: 24px solid chocolate;"), v("24px solid coral", "border-block: 24px solid coral;"), v("24px solid cornflowerblue", "border-block: 24px solid cornflowerblue;"), v("24px solid cornsilk", "border-block: 24px solid cornsilk;"), v("24px solid crimson", "border-block: 24px solid crimson;"), v("24px solid cyan", "border-block: 24px solid cyan;"), v("24px solid darkblue", "border-block: 24px solid darkblue;"), v("24px solid darkcyan", "border-block: 24px solid darkcyan;"), v("24px solid darkgoldenrod", "border-block: 24px solid darkgoldenrod;"), v("24px solid darkgray", "border-block: 24px solid darkgray;"), v("24px solid darkgreen", "border-block: 24px solid darkgreen;"), v("24px solid darkgrey", "border-block: 24px solid darkgrey;"), ], }, { number: 200, name: "border-block-color", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-block-color\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the color of the logical block borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-top-color\"\u003e\u003ccode\u003eborder-top-color\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-bottom-color\"\u003e\u003ccode\u003eborder-bottom-color\u003c/code\u003e\u003c/a\u003e, or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-right-color\"\u003e\u003ccode\u003eborder-right-color\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-left-color\"\u003e\u003ccode\u003eborder-left-color\u003c/code\u003e\u003c/a\u003e property depending on the values defined for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BorderTopColorProp , [ BorderTopColorProp ]", ebnf: "border-block-color =\n BorderTopColorProp , [ BorderTopColorProp ]", valueType: "keyword", defaultValue: "#2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 161, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003cflex\u003e", samples: ["1fr", "2fr", "3fr"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("#c5483c", "border-block-color: #c5483c;"), v("#2f5fd0", "border-block-color: #2f5fd0;"), v("rgb(50%, 80%, 30%, 0.75)", "border-block-color: rgb(50%, 80%, 30%, 0.75);"), v("rgb(1, 0.5, 2, 0.75)", "border-block-color: rgb(1, 0.5, 2, 0.75);"), v("rgb(from #c5483c 80% 65% 100%/ 2)", "border-block-color: rgb(from #c5483c 80% 65% 100%/ 2);"), v("rgba(50%, 80%, 30%, 0.75)", "border-block-color: rgba(50%, 80%, 30%, 0.75);"), v("rgba(1, 0.5, 2, 0.75)", "border-block-color: rgba(1, 0.5, 2, 0.75);"), v("rgba(from #c5483c 80% 65% 100%/ 2)", "border-block-color: rgba(from #c5483c 80% 65% 100%/ 2);"), v("hsl(45deg, 30%, 65%, 0.25)", "border-block-color: hsl(45deg, 30%, 65%, 0.25);"), v("hsl(from #c5483c 135deg 65% 100%/ 2)", "border-block-color: hsl(from #c5483c 135deg 65% 100%/ 2);"), v("hsla(45deg, 30%, 65%, 0.25)", "border-block-color: hsla(45deg, 30%, 65%, 0.25);"), v("hsla(from #c5483c 135deg 65% 100%/ 2)", "border-block-color: hsla(from #c5483c 135deg 65% 100%/ 2);"), v("hwb(from #c5483c 135deg 65% 100%/ 2)", "border-block-color: hwb(from #c5483c 135deg 65% 100%/ 2);"), v("lab(from #c5483c 80% 15% 80%/ 1)", "border-block-color: lab(from #c5483c 80% 15% 80%/ 1);"), v("lch(from #c5483c 80% 15% 250deg/ 1)", "border-block-color: lch(from #c5483c 80% 15% 250deg/ 1);"), v("oklab(from #c5483c 80% 15% 80%/ 1)", "border-block-color: oklab(from #c5483c 80% 15% 80%/ 1);"), v("oklch(from #c5483c 80% 15% 250deg/ 1)", "border-block-color: oklch(from #c5483c 80% 15% 250deg/ 1);"), v("ictcp(from #c5483c 80% 15% 80%/ 1)", "border-block-color: ictcp(from #c5483c 80% 15% 80%/ 1);"), v("jzazbz(from #c5483c 80% 15% 80%/ 1)", "border-block-color: jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("jzczhz(from #c5483c 80% 15% 250deg/ 1)", "border-block-color: jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("alpha(from #c5483c/ 0.5)", "border-block-color: alpha(from #c5483c/ 0.5);"), v("color(from #c5483c --my-var 2/ 0.5)", "border-block-color: color(from #c5483c --my-var 2/ 0.5);"), v("color-hdr(#c5483c 0.5, #c5483c 0.75)", "border-block-color: color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("aliceblue", "border-block-color: aliceblue;"), v("antiquewhite", "border-block-color: antiquewhite;"), v("aqua", "border-block-color: aqua;"), v("aquamarine", "border-block-color: aquamarine;"), v("azure", "border-block-color: azure;"), v("beige", "border-block-color: beige;"), v("bisque", "border-block-color: bisque;"), v("black", "border-block-color: black;"), v("blanchedalmond", "border-block-color: blanchedalmond;"), v("blue", "border-block-color: blue;"), v("blueviolet", "border-block-color: blueviolet;"), v("brown", "border-block-color: brown;"), v("burlywood", "border-block-color: burlywood;"), v("cadetblue", "border-block-color: cadetblue;"), v("chartreuse", "border-block-color: chartreuse;"), v("chocolate", "border-block-color: chocolate;"), v("coral", "border-block-color: coral;"), v("cornflowerblue", "border-block-color: cornflowerblue;"), v("cornsilk", "border-block-color: cornsilk;"), v("crimson", "border-block-color: crimson;"), v("cyan", "border-block-color: cyan;"), v("darkblue", "border-block-color: darkblue;"), v("darkcyan", "border-block-color: darkcyan;"), v("darkgoldenrod", "border-block-color: darkgoldenrod;"), v("darkgray", "border-block-color: darkgray;"), v("darkgreen", "border-block-color: darkgreen;"), v("darkgrey", "border-block-color: darkgrey;"), ], }, { number: 201, name: "border-block-end", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-block-end\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property is a \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e for setting the individual logical block-end border property values in a single place in the style sheet.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "[ LineWidthType ] , [ LineStyleType ] , [ ColorType ]", ebnf: "border-block-end =\n [ LineWidthType ] , [ LineStyleType ] , [ ColorType ]", valueType: "length", defaultValue: "24px solid #2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px solid #c5483c", "border-block-end: 24px solid #c5483c;"), v("24px solid #2f5fd0", "border-block-end: 24px solid #2f5fd0;"), v("24px solid rgb(50%, 80%, 30%, 0.75)", "border-block-end: 24px solid rgb(50%, 80%, 30%, 0.75);"), v("24px solid rgb(1, 0.5, 2, 0.75)", "border-block-end: 24px solid rgb(1, 0.5, 2, 0.75);"), v("24px solid rgb(from #c5483c 80% 65% 100%/ 2)", "border-block-end: 24px solid rgb(from #c5483c 80% 65% 100%/ 2);"), v("24px solid rgba(50%, 80%, 30%, 0.75)", "border-block-end: 24px solid rgba(50%, 80%, 30%, 0.75);"), v("24px solid rgba(1, 0.5, 2, 0.75)", "border-block-end: 24px solid rgba(1, 0.5, 2, 0.75);"), v("24px solid rgba(from #c5483c 80% 65% 100%/ 2)", "border-block-end: 24px solid rgba(from #c5483c 80% 65% 100%/ 2);"), v("24px solid hsl(45deg, 30%, 65%, 0.25)", "border-block-end: 24px solid hsl(45deg, 30%, 65%, 0.25);"), v("24px solid hsl(from #c5483c 135deg 65% 100%/ 2)", "border-block-end: 24px solid hsl(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid hsla(45deg, 30%, 65%, 0.25)", "border-block-end: 24px solid hsla(45deg, 30%, 65%, 0.25);"), v("24px solid hsla(from #c5483c 135deg 65% 100%/ 2)", "border-block-end: 24px solid hsla(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid hwb(from #c5483c 135deg 65% 100%/ 2)", "border-block-end: 24px solid hwb(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid lab(from #c5483c 80% 15% 80%/ 1)", "border-block-end: 24px solid lab(from #c5483c 80% 15% 80%/ 1);"), v("24px solid lch(from #c5483c 80% 15% 250deg/ 1)", "border-block-end: 24px solid lch(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid oklab(from #c5483c 80% 15% 80%/ 1)", "border-block-end: 24px solid oklab(from #c5483c 80% 15% 80%/ 1);"), v("24px solid oklch(from #c5483c 80% 15% 250deg/ 1)", "border-block-end: 24px solid oklch(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid ictcp(from #c5483c 80% 15% 80%/ 1)", "border-block-end: 24px solid ictcp(from #c5483c 80% 15% 80%/ 1);"), v("24px solid jzazbz(from #c5483c 80% 15% 80%/ 1)", "border-block-end: 24px solid jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("24px solid jzczhz(from #c5483c 80% 15% 250deg/ 1)", "border-block-end: 24px solid jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid alpha(from #c5483c/ 0.5)", "border-block-end: 24px solid alpha(from #c5483c/ 0.5);"), v("24px solid color(from #c5483c --my-var 2/ 0.5)", "border-block-end: 24px solid color(from #c5483c --my-var 2/ 0.5);"), v("24px solid color-hdr(#c5483c 0.5, #c5483c 0.75)", "border-block-end: 24px solid color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("24px solid aliceblue", "border-block-end: 24px solid aliceblue;"), v("24px solid antiquewhite", "border-block-end: 24px solid antiquewhite;"), v("24px solid aqua", "border-block-end: 24px solid aqua;"), v("24px solid aquamarine", "border-block-end: 24px solid aquamarine;"), v("24px solid azure", "border-block-end: 24px solid azure;"), v("24px solid beige", "border-block-end: 24px solid beige;"), v("24px solid bisque", "border-block-end: 24px solid bisque;"), v("24px solid black", "border-block-end: 24px solid black;"), v("24px solid blanchedalmond", "border-block-end: 24px solid blanchedalmond;"), v("24px solid blue", "border-block-end: 24px solid blue;"), v("24px solid blueviolet", "border-block-end: 24px solid blueviolet;"), v("24px solid brown", "border-block-end: 24px solid brown;"), v("24px solid burlywood", "border-block-end: 24px solid burlywood;"), v("24px solid cadetblue", "border-block-end: 24px solid cadetblue;"), v("24px solid chartreuse", "border-block-end: 24px solid chartreuse;"), v("24px solid chocolate", "border-block-end: 24px solid chocolate;"), v("24px solid coral", "border-block-end: 24px solid coral;"), v("24px solid cornflowerblue", "border-block-end: 24px solid cornflowerblue;"), v("24px solid cornsilk", "border-block-end: 24px solid cornsilk;"), v("24px solid crimson", "border-block-end: 24px solid crimson;"), v("24px solid cyan", "border-block-end: 24px solid cyan;"), v("24px solid darkblue", "border-block-end: 24px solid darkblue;"), v("24px solid darkcyan", "border-block-end: 24px solid darkcyan;"), v("24px solid darkgoldenrod", "border-block-end: 24px solid darkgoldenrod;"), v("24px solid darkgray", "border-block-end: 24px solid darkgray;"), v("24px solid darkgreen", "border-block-end: 24px solid darkgreen;"), v("24px solid darkgrey", "border-block-end: 24px solid darkgrey;"), ], }, { number: 202, name: "border-block-end-color", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-block-end-color\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the color of the logical block-end border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-top-color\"\u003e\u003ccode\u003eborder-top-color\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-right-color\"\u003e\u003ccode\u003eborder-right-color\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-bottom-color\"\u003e\u003ccode\u003eborder-bottom-color\u003c/code\u003e\u003c/a\u003e, or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-left-color\"\u003e\u003ccode\u003eborder-left-color\u003c/code\u003e\u003c/a\u003e property depending on the values defined for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ColorType | Image1dType", ebnf: "border-block-end-color =\n ColorType | Image1dType", valueType: "keyword", defaultValue: "#2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 161, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003cflex\u003e", samples: ["1fr", "2fr", "3fr"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("#c5483c", "border-block-end-color: #c5483c;"), v("#2f5fd0", "border-block-end-color: #2f5fd0;"), v("rgb(50%, 80%, 30%, 0.75)", "border-block-end-color: rgb(50%, 80%, 30%, 0.75);"), v("rgb(1, 0.5, 2, 0.75)", "border-block-end-color: rgb(1, 0.5, 2, 0.75);"), v("rgb(from #c5483c 80% 65% 100%/ 2)", "border-block-end-color: rgb(from #c5483c 80% 65% 100%/ 2);"), v("rgba(50%, 80%, 30%, 0.75)", "border-block-end-color: rgba(50%, 80%, 30%, 0.75);"), v("rgba(1, 0.5, 2, 0.75)", "border-block-end-color: rgba(1, 0.5, 2, 0.75);"), v("rgba(from #c5483c 80% 65% 100%/ 2)", "border-block-end-color: rgba(from #c5483c 80% 65% 100%/ 2);"), v("hsl(45deg, 30%, 65%, 0.25)", "border-block-end-color: hsl(45deg, 30%, 65%, 0.25);"), v("hsl(from #c5483c 135deg 65% 100%/ 2)", "border-block-end-color: hsl(from #c5483c 135deg 65% 100%/ 2);"), v("hsla(45deg, 30%, 65%, 0.25)", "border-block-end-color: hsla(45deg, 30%, 65%, 0.25);"), v("hsla(from #c5483c 135deg 65% 100%/ 2)", "border-block-end-color: hsla(from #c5483c 135deg 65% 100%/ 2);"), v("hwb(from #c5483c 135deg 65% 100%/ 2)", "border-block-end-color: hwb(from #c5483c 135deg 65% 100%/ 2);"), v("lab(from #c5483c 80% 15% 80%/ 1)", "border-block-end-color: lab(from #c5483c 80% 15% 80%/ 1);"), v("lch(from #c5483c 80% 15% 250deg/ 1)", "border-block-end-color: lch(from #c5483c 80% 15% 250deg/ 1);"), v("oklab(from #c5483c 80% 15% 80%/ 1)", "border-block-end-color: oklab(from #c5483c 80% 15% 80%/ 1);"), v("oklch(from #c5483c 80% 15% 250deg/ 1)", "border-block-end-color: oklch(from #c5483c 80% 15% 250deg/ 1);"), v("ictcp(from #c5483c 80% 15% 80%/ 1)", "border-block-end-color: ictcp(from #c5483c 80% 15% 80%/ 1);"), v("jzazbz(from #c5483c 80% 15% 80%/ 1)", "border-block-end-color: jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("jzczhz(from #c5483c 80% 15% 250deg/ 1)", "border-block-end-color: jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("alpha(from #c5483c/ 0.5)", "border-block-end-color: alpha(from #c5483c/ 0.5);"), v("color(from #c5483c --my-var 2/ 0.5)", "border-block-end-color: color(from #c5483c --my-var 2/ 0.5);"), v("color-hdr(#c5483c 0.5, #c5483c 0.75)", "border-block-end-color: color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("aliceblue", "border-block-end-color: aliceblue;"), v("antiquewhite", "border-block-end-color: antiquewhite;"), v("aqua", "border-block-end-color: aqua;"), v("aquamarine", "border-block-end-color: aquamarine;"), v("azure", "border-block-end-color: azure;"), v("beige", "border-block-end-color: beige;"), v("bisque", "border-block-end-color: bisque;"), v("black", "border-block-end-color: black;"), v("blanchedalmond", "border-block-end-color: blanchedalmond;"), v("blue", "border-block-end-color: blue;"), v("blueviolet", "border-block-end-color: blueviolet;"), v("brown", "border-block-end-color: brown;"), v("burlywood", "border-block-end-color: burlywood;"), v("cadetblue", "border-block-end-color: cadetblue;"), v("chartreuse", "border-block-end-color: chartreuse;"), v("chocolate", "border-block-end-color: chocolate;"), v("coral", "border-block-end-color: coral;"), v("cornflowerblue", "border-block-end-color: cornflowerblue;"), v("cornsilk", "border-block-end-color: cornsilk;"), v("crimson", "border-block-end-color: crimson;"), v("cyan", "border-block-end-color: cyan;"), v("darkblue", "border-block-end-color: darkblue;"), v("darkcyan", "border-block-end-color: darkcyan;"), v("darkgoldenrod", "border-block-end-color: darkgoldenrod;"), v("darkgray", "border-block-end-color: darkgray;"), v("darkgreen", "border-block-end-color: darkgreen;"), v("darkgrey", "border-block-end-color: darkgrey;"), ], }, { number: 203, name: "border-block-end-style", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-block-end-style\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the style of the logical block-end border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-top-style\"\u003e\u003ccode\u003eborder-top-style\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-right-style\"\u003e\u003ccode\u003eborder-right-style\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-bottom-style\"\u003e\u003ccode\u003eborder-bottom-style\u003c/code\u003e\u003c/a\u003e, or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-left-style\"\u003e\u003ccode\u003eborder-left-style\u003c/code\u003e\u003c/a\u003e property depending on the values defined for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LineStyleType", ebnf: "border-block-end-style =\n LineStyleType", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: false, trueCount: 10, shown: 10, assists: [], values: [ v("solid", "border-block-end-style: solid;"), v("none", "border-block-end-style: none;"), v("hidden", "border-block-end-style: hidden;"), v("dotted", "border-block-end-style: dotted;"), v("dashed", "border-block-end-style: dashed;"), v("double", "border-block-end-style: double;"), v("groove", "border-block-end-style: groove;"), v("ridge", "border-block-end-style: ridge;"), v("inset", "border-block-end-style: inset;"), v("outset", "border-block-end-style: outset;"), ], }, { number: 204, name: "border-block-end-width", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-block-end-width\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the width of the logical block-end border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-top-width\"\u003e\u003ccode\u003eborder-top-width\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-right-width\"\u003e\u003ccode\u003eborder-right-width\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-bottom-width\"\u003e\u003ccode\u003eborder-bottom-width\u003c/code\u003e\u003c/a\u003e, or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-left-width\"\u003e\u003ccode\u003eborder-left-width\u003c/code\u003e\u003c/a\u003e property depending on the values defined for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LineWidthType", ebnf: "border-block-end-width =\n LineWidthType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 8, shown: 8, assists: [{ type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "border-block-end-width: 24px;"), v("48px", "border-block-end-width: 48px;"), v("8px", "border-block-end-width: 8px;"), v("16px", "border-block-end-width: 16px;"), v("64px", "border-block-end-width: 64px;"), v("thin", "border-block-end-width: thin;"), v("medium", "border-block-end-width: medium;"), v("thick", "border-block-end-width: thick;"), ], }, { number: 205, name: "border-block-start", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-block-start\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property is a \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e for setting the individual logical block-start border property values in a single place in the style sheet.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "[ LineWidthType ] , [ LineStyleType ] , [ ColorType ]", ebnf: "border-block-start =\n [ LineWidthType ] , [ LineStyleType ] , [ ColorType ]", valueType: "length", defaultValue: "24px solid #2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px solid #c5483c", "border-block-start: 24px solid #c5483c;"), v("24px solid #2f5fd0", "border-block-start: 24px solid #2f5fd0;"), v("24px solid rgb(50%, 80%, 30%, 0.75)", "border-block-start: 24px solid rgb(50%, 80%, 30%, 0.75);"), v("24px solid rgb(1, 0.5, 2, 0.75)", "border-block-start: 24px solid rgb(1, 0.5, 2, 0.75);"), v("24px solid rgb(from #c5483c 80% 65% 100%/ 2)", "border-block-start: 24px solid rgb(from #c5483c 80% 65% 100%/ 2);"), v("24px solid rgba(50%, 80%, 30%, 0.75)", "border-block-start: 24px solid rgba(50%, 80%, 30%, 0.75);"), v("24px solid rgba(1, 0.5, 2, 0.75)", "border-block-start: 24px solid rgba(1, 0.5, 2, 0.75);"), v("24px solid rgba(from #c5483c 80% 65% 100%/ 2)", "border-block-start: 24px solid rgba(from #c5483c 80% 65% 100%/ 2);"), v("24px solid hsl(45deg, 30%, 65%, 0.25)", "border-block-start: 24px solid hsl(45deg, 30%, 65%, 0.25);"), v("24px solid hsl(from #c5483c 135deg 65% 100%/ 2)", "border-block-start: 24px solid hsl(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid hsla(45deg, 30%, 65%, 0.25)", "border-block-start: 24px solid hsla(45deg, 30%, 65%, 0.25);"), v("24px solid hsla(from #c5483c 135deg 65% 100%/ 2)", "border-block-start: 24px solid hsla(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid hwb(from #c5483c 135deg 65% 100%/ 2)", "border-block-start: 24px solid hwb(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid lab(from #c5483c 80% 15% 80%/ 1)", "border-block-start: 24px solid lab(from #c5483c 80% 15% 80%/ 1);"), v("24px solid lch(from #c5483c 80% 15% 250deg/ 1)", "border-block-start: 24px solid lch(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid oklab(from #c5483c 80% 15% 80%/ 1)", "border-block-start: 24px solid oklab(from #c5483c 80% 15% 80%/ 1);"), v("24px solid oklch(from #c5483c 80% 15% 250deg/ 1)", "border-block-start: 24px solid oklch(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid ictcp(from #c5483c 80% 15% 80%/ 1)", "border-block-start: 24px solid ictcp(from #c5483c 80% 15% 80%/ 1);"), v("24px solid jzazbz(from #c5483c 80% 15% 80%/ 1)", "border-block-start: 24px solid jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("24px solid jzczhz(from #c5483c 80% 15% 250deg/ 1)", "border-block-start: 24px solid jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid alpha(from #c5483c/ 0.5)", "border-block-start: 24px solid alpha(from #c5483c/ 0.5);"), v("24px solid color(from #c5483c --my-var 2/ 0.5)", "border-block-start: 24px solid color(from #c5483c --my-var 2/ 0.5);"), v("24px solid color-hdr(#c5483c 0.5, #c5483c 0.75)", "border-block-start: 24px solid color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("24px solid aliceblue", "border-block-start: 24px solid aliceblue;"), v("24px solid antiquewhite", "border-block-start: 24px solid antiquewhite;"), v("24px solid aqua", "border-block-start: 24px solid aqua;"), v("24px solid aquamarine", "border-block-start: 24px solid aquamarine;"), v("24px solid azure", "border-block-start: 24px solid azure;"), v("24px solid beige", "border-block-start: 24px solid beige;"), v("24px solid bisque", "border-block-start: 24px solid bisque;"), v("24px solid black", "border-block-start: 24px solid black;"), v("24px solid blanchedalmond", "border-block-start: 24px solid blanchedalmond;"), v("24px solid blue", "border-block-start: 24px solid blue;"), v("24px solid blueviolet", "border-block-start: 24px solid blueviolet;"), v("24px solid brown", "border-block-start: 24px solid brown;"), v("24px solid burlywood", "border-block-start: 24px solid burlywood;"), v("24px solid cadetblue", "border-block-start: 24px solid cadetblue;"), v("24px solid chartreuse", "border-block-start: 24px solid chartreuse;"), v("24px solid chocolate", "border-block-start: 24px solid chocolate;"), v("24px solid coral", "border-block-start: 24px solid coral;"), v("24px solid cornflowerblue", "border-block-start: 24px solid cornflowerblue;"), v("24px solid cornsilk", "border-block-start: 24px solid cornsilk;"), v("24px solid crimson", "border-block-start: 24px solid crimson;"), v("24px solid cyan", "border-block-start: 24px solid cyan;"), v("24px solid darkblue", "border-block-start: 24px solid darkblue;"), v("24px solid darkcyan", "border-block-start: 24px solid darkcyan;"), v("24px solid darkgoldenrod", "border-block-start: 24px solid darkgoldenrod;"), v("24px solid darkgray", "border-block-start: 24px solid darkgray;"), v("24px solid darkgreen", "border-block-start: 24px solid darkgreen;"), v("24px solid darkgrey", "border-block-start: 24px solid darkgrey;"), ], }, { number: 206, name: "border-block-start-color", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-block-start-color\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the color of the logical block-start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-top-color\"\u003e\u003ccode\u003eborder-top-color\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-right-color\"\u003e\u003ccode\u003eborder-right-color\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-bottom-color\"\u003e\u003ccode\u003eborder-bottom-color\u003c/code\u003e\u003c/a\u003e, or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-left-color\"\u003e\u003ccode\u003eborder-left-color\u003c/code\u003e\u003c/a\u003e property depending on the values defined for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ColorType | Image1dType", ebnf: "border-block-start-color =\n ColorType | Image1dType", valueType: "keyword", defaultValue: "#2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 161, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003cflex\u003e", samples: ["1fr", "2fr", "3fr"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("#c5483c", "border-block-start-color: #c5483c;"), v("#2f5fd0", "border-block-start-color: #2f5fd0;"), v("rgb(50%, 80%, 30%, 0.75)", "border-block-start-color: rgb(50%, 80%, 30%, 0.75);"), v("rgb(1, 0.5, 2, 0.75)", "border-block-start-color: rgb(1, 0.5, 2, 0.75);"), v("rgb(from #c5483c 80% 65% 100%/ 2)", "border-block-start-color: rgb(from #c5483c 80% 65% 100%/ 2);"), v("rgba(50%, 80%, 30%, 0.75)", "border-block-start-color: rgba(50%, 80%, 30%, 0.75);"), v("rgba(1, 0.5, 2, 0.75)", "border-block-start-color: rgba(1, 0.5, 2, 0.75);"), v("rgba(from #c5483c 80% 65% 100%/ 2)", "border-block-start-color: rgba(from #c5483c 80% 65% 100%/ 2);"), v("hsl(45deg, 30%, 65%, 0.25)", "border-block-start-color: hsl(45deg, 30%, 65%, 0.25);"), v("hsl(from #c5483c 135deg 65% 100%/ 2)", "border-block-start-color: hsl(from #c5483c 135deg 65% 100%/ 2);"), v("hsla(45deg, 30%, 65%, 0.25)", "border-block-start-color: hsla(45deg, 30%, 65%, 0.25);"), v("hsla(from #c5483c 135deg 65% 100%/ 2)", "border-block-start-color: hsla(from #c5483c 135deg 65% 100%/ 2);"), v("hwb(from #c5483c 135deg 65% 100%/ 2)", "border-block-start-color: hwb(from #c5483c 135deg 65% 100%/ 2);"), v("lab(from #c5483c 80% 15% 80%/ 1)", "border-block-start-color: lab(from #c5483c 80% 15% 80%/ 1);"), v("lch(from #c5483c 80% 15% 250deg/ 1)", "border-block-start-color: lch(from #c5483c 80% 15% 250deg/ 1);"), v("oklab(from #c5483c 80% 15% 80%/ 1)", "border-block-start-color: oklab(from #c5483c 80% 15% 80%/ 1);"), v("oklch(from #c5483c 80% 15% 250deg/ 1)", "border-block-start-color: oklch(from #c5483c 80% 15% 250deg/ 1);"), v("ictcp(from #c5483c 80% 15% 80%/ 1)", "border-block-start-color: ictcp(from #c5483c 80% 15% 80%/ 1);"), v("jzazbz(from #c5483c 80% 15% 80%/ 1)", "border-block-start-color: jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("jzczhz(from #c5483c 80% 15% 250deg/ 1)", "border-block-start-color: jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("alpha(from #c5483c/ 0.5)", "border-block-start-color: alpha(from #c5483c/ 0.5);"), v("color(from #c5483c --my-var 2/ 0.5)", "border-block-start-color: color(from #c5483c --my-var 2/ 0.5);"), v("color-hdr(#c5483c 0.5, #c5483c 0.75)", "border-block-start-color: color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("aliceblue", "border-block-start-color: aliceblue;"), v("antiquewhite", "border-block-start-color: antiquewhite;"), v("aqua", "border-block-start-color: aqua;"), v("aquamarine", "border-block-start-color: aquamarine;"), v("azure", "border-block-start-color: azure;"), v("beige", "border-block-start-color: beige;"), v("bisque", "border-block-start-color: bisque;"), v("black", "border-block-start-color: black;"), v("blanchedalmond", "border-block-start-color: blanchedalmond;"), v("blue", "border-block-start-color: blue;"), v("blueviolet", "border-block-start-color: blueviolet;"), v("brown", "border-block-start-color: brown;"), v("burlywood", "border-block-start-color: burlywood;"), v("cadetblue", "border-block-start-color: cadetblue;"), v("chartreuse", "border-block-start-color: chartreuse;"), v("chocolate", "border-block-start-color: chocolate;"), v("coral", "border-block-start-color: coral;"), v("cornflowerblue", "border-block-start-color: cornflowerblue;"), v("cornsilk", "border-block-start-color: cornsilk;"), v("crimson", "border-block-start-color: crimson;"), v("cyan", "border-block-start-color: cyan;"), v("darkblue", "border-block-start-color: darkblue;"), v("darkcyan", "border-block-start-color: darkcyan;"), v("darkgoldenrod", "border-block-start-color: darkgoldenrod;"), v("darkgray", "border-block-start-color: darkgray;"), v("darkgreen", "border-block-start-color: darkgreen;"), v("darkgrey", "border-block-start-color: darkgrey;"), ], }, { number: 207, name: "border-block-start-style", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-block-start-style\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the style of the logical block start border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-top-style\"\u003e\u003ccode\u003eborder-top-style\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-right-style\"\u003e\u003ccode\u003eborder-right-style\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-bottom-style\"\u003e\u003ccode\u003eborder-bottom-style\u003c/code\u003e\u003c/a\u003e, or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-left-style\"\u003e\u003ccode\u003eborder-left-style\u003c/code\u003e\u003c/a\u003e property depending on the values defined for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LineStyleType", ebnf: "border-block-start-style =\n LineStyleType", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: false, trueCount: 10, shown: 10, assists: [], values: [ v("solid", "border-block-start-style: solid;"), v("none", "border-block-start-style: none;"), v("hidden", "border-block-start-style: hidden;"), v("dotted", "border-block-start-style: dotted;"), v("dashed", "border-block-start-style: dashed;"), v("double", "border-block-start-style: double;"), v("groove", "border-block-start-style: groove;"), v("ridge", "border-block-start-style: ridge;"), v("inset", "border-block-start-style: inset;"), v("outset", "border-block-start-style: outset;"), ], }, { number: 208, name: "border-block-start-width", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-block-start-width\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the width of the logical block-start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-top-width\"\u003e\u003ccode\u003eborder-top-width\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-right-width\"\u003e\u003ccode\u003eborder-right-width\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-bottom-width\"\u003e\u003ccode\u003eborder-bottom-width\u003c/code\u003e\u003c/a\u003e, or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-left-width\"\u003e\u003ccode\u003eborder-left-width\u003c/code\u003e\u003c/a\u003e property depending on the values defined for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LineWidthType", ebnf: "border-block-start-width =\n LineWidthType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 8, shown: 8, assists: [{ type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "border-block-start-width: 24px;"), v("48px", "border-block-start-width: 48px;"), v("8px", "border-block-start-width: 8px;"), v("16px", "border-block-start-width: 16px;"), v("64px", "border-block-start-width: 64px;"), v("thin", "border-block-start-width: thin;"), v("medium", "border-block-start-width: medium;"), v("thick", "border-block-start-width: thick;"), ], }, { number: 209, name: "border-block-style", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-block-style\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the style of the logical block borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-top-style\"\u003e\u003ccode\u003eborder-top-style\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-bottom-style\"\u003e\u003ccode\u003eborder-bottom-style\u003c/code\u003e\u003c/a\u003e, or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-left-style\"\u003e\u003ccode\u003eborder-left-style\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-right-style\"\u003e\u003ccode\u003eborder-right-style\u003c/code\u003e\u003c/a\u003e properties depending on the values defined for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BorderTopStyleProp , [ BorderTopStyleProp ]", ebnf: "border-block-style =\n BorderTopStyleProp , [ BorderTopStyleProp ]", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: false, trueCount: 10, shown: 10, assists: [], values: [ v("solid", "border-block-style: solid;"), v("none", "border-block-style: none;"), v("hidden", "border-block-style: hidden;"), v("dotted", "border-block-style: dotted;"), v("dashed", "border-block-style: dashed;"), v("double", "border-block-style: double;"), v("groove", "border-block-style: groove;"), v("ridge", "border-block-style: ridge;"), v("inset", "border-block-style: inset;"), v("outset", "border-block-style: outset;"), ], }, { number: 210, name: "border-block-width", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-block-width\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the width of the logical block borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-top-width\"\u003e\u003ccode\u003eborder-top-width\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-bottom-width\"\u003e\u003ccode\u003eborder-bottom-width\u003c/code\u003e\u003c/a\u003e, or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-left-width\"\u003e\u003ccode\u003eborder-left-width\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-right-width\"\u003e\u003ccode\u003eborder-right-width\u003c/code\u003e\u003c/a\u003e property depending on the values defined for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BorderTopWidthProp , [ BorderTopWidthProp ]", ebnf: "border-block-width =\n BorderTopWidthProp , [ BorderTopWidthProp ]", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 8, shown: 8, assists: [{ type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "border-block-width: 24px;"), v("48px", "border-block-width: 48px;"), v("8px", "border-block-width: 8px;"), v("16px", "border-block-width: 16px;"), v("64px", "border-block-width: 64px;"), v("thin", "border-block-width: thin;"), v("medium", "border-block-width: medium;"), v("thick", "border-block-width: thick;"), ], }, { number: 211, name: "border-bottom", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-bottom\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets an element's bottom \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border\"\u003eborder\u003c/a\u003e. It sets the values of \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-bottom-width\"\u003e\u003ccode\u003eborder-bottom-width\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-bottom-style\"\u003e\u003ccode\u003eborder-bottom-style\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-bottom-color\"\u003e\u003ccode\u003eborder-bottom-color\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LineWidthType , [ LineStyleType , [ ColorType ] | ColorType , [ LineStyleType ] ]\n | LineStyleType , [ LineWidthType , [ ColorType ] | ColorType , [ LineWidthType ] ]\n | ColorType , [ LineWidthType , [ LineStyleType ] | LineStyleType , [ LineWidthType ] ]", ebnf: "border-bottom =\n LineWidthType , [ LineStyleType , [ ColorType ] | ColorType , [ LineStyleType ] ]\n | LineStyleType , [ LineWidthType , [ ColorType ] | ColorType , [ LineWidthType ] ]\n | ColorType , [ LineWidthType , [ LineStyleType ] | LineStyleType , [ LineWidthType ] ]", valueType: "length", defaultValue: "24px solid #2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 320, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px solid #c5483c", "border-bottom: 24px solid #c5483c;"), v("24px solid #2f5fd0", "border-bottom: 24px solid #2f5fd0;"), v("24px solid rgb(50%, 80%, 30%, 0.75)", "border-bottom: 24px solid rgb(50%, 80%, 30%, 0.75);"), v("24px solid rgb(1, 0.5, 2, 0.75)", "border-bottom: 24px solid rgb(1, 0.5, 2, 0.75);"), v("24px solid rgb(from #c5483c 80% 65% 100%/ 2)", "border-bottom: 24px solid rgb(from #c5483c 80% 65% 100%/ 2);"), v("24px solid rgba(50%, 80%, 30%, 0.75)", "border-bottom: 24px solid rgba(50%, 80%, 30%, 0.75);"), v("24px solid rgba(1, 0.5, 2, 0.75)", "border-bottom: 24px solid rgba(1, 0.5, 2, 0.75);"), v("24px solid rgba(from #c5483c 80% 65% 100%/ 2)", "border-bottom: 24px solid rgba(from #c5483c 80% 65% 100%/ 2);"), v("24px solid hsl(45deg, 30%, 65%, 0.25)", "border-bottom: 24px solid hsl(45deg, 30%, 65%, 0.25);"), v("24px solid hsl(from #c5483c 135deg 65% 100%/ 2)", "border-bottom: 24px solid hsl(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid hsla(45deg, 30%, 65%, 0.25)", "border-bottom: 24px solid hsla(45deg, 30%, 65%, 0.25);"), v("24px solid hsla(from #c5483c 135deg 65% 100%/ 2)", "border-bottom: 24px solid hsla(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid hwb(from #c5483c 135deg 65% 100%/ 2)", "border-bottom: 24px solid hwb(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid lab(from #c5483c 80% 15% 80%/ 1)", "border-bottom: 24px solid lab(from #c5483c 80% 15% 80%/ 1);"), v("24px solid lch(from #c5483c 80% 15% 250deg/ 1)", "border-bottom: 24px solid lch(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid oklab(from #c5483c 80% 15% 80%/ 1)", "border-bottom: 24px solid oklab(from #c5483c 80% 15% 80%/ 1);"), v("24px solid oklch(from #c5483c 80% 15% 250deg/ 1)", "border-bottom: 24px solid oklch(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid ictcp(from #c5483c 80% 15% 80%/ 1)", "border-bottom: 24px solid ictcp(from #c5483c 80% 15% 80%/ 1);"), v("24px solid jzazbz(from #c5483c 80% 15% 80%/ 1)", "border-bottom: 24px solid jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("24px solid jzczhz(from #c5483c 80% 15% 250deg/ 1)", "border-bottom: 24px solid jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid alpha(from #c5483c/ 0.5)", "border-bottom: 24px solid alpha(from #c5483c/ 0.5);"), v("24px solid color(from #c5483c --my-var 2/ 0.5)", "border-bottom: 24px solid color(from #c5483c --my-var 2/ 0.5);"), v("24px solid color-hdr(#c5483c 0.5, #c5483c 0.75)", "border-bottom: 24px solid color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("24px solid aliceblue", "border-bottom: 24px solid aliceblue;"), v("24px solid antiquewhite", "border-bottom: 24px solid antiquewhite;"), v("24px solid aqua", "border-bottom: 24px solid aqua;"), v("24px solid aquamarine", "border-bottom: 24px solid aquamarine;"), v("24px solid azure", "border-bottom: 24px solid azure;"), v("24px solid beige", "border-bottom: 24px solid beige;"), v("24px solid bisque", "border-bottom: 24px solid bisque;"), v("24px solid black", "border-bottom: 24px solid black;"), v("24px solid blanchedalmond", "border-bottom: 24px solid blanchedalmond;"), v("24px solid blue", "border-bottom: 24px solid blue;"), v("24px solid blueviolet", "border-bottom: 24px solid blueviolet;"), v("24px solid brown", "border-bottom: 24px solid brown;"), v("24px solid burlywood", "border-bottom: 24px solid burlywood;"), v("24px solid cadetblue", "border-bottom: 24px solid cadetblue;"), v("24px solid chartreuse", "border-bottom: 24px solid chartreuse;"), v("24px solid chocolate", "border-bottom: 24px solid chocolate;"), v("24px solid coral", "border-bottom: 24px solid coral;"), v("24px solid cornflowerblue", "border-bottom: 24px solid cornflowerblue;"), v("24px solid cornsilk", "border-bottom: 24px solid cornsilk;"), v("24px solid crimson", "border-bottom: 24px solid crimson;"), v("24px solid cyan", "border-bottom: 24px solid cyan;"), v("24px solid darkblue", "border-bottom: 24px solid darkblue;"), v("24px solid darkcyan", "border-bottom: 24px solid darkcyan;"), v("24px solid darkgoldenrod", "border-bottom: 24px solid darkgoldenrod;"), v("24px solid darkgray", "border-bottom: 24px solid darkgray;"), v("24px solid darkgreen", "border-bottom: 24px solid darkgreen;"), v("24px solid darkgrey", "border-bottom: 24px solid darkgrey;"), ], }, { number: 212, name: "border-bottom-color", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-bottom-color\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the color of an element's bottom \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border\"\u003eborder\u003c/a\u003e. It can also be set with the shorthand CSS properties \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-color\"\u003e\u003ccode\u003eborder-color\u003c/code\u003e\u003c/a\u003e or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-bottom\"\u003e\u003ccode\u003eborder-bottom\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ColorType | Image1dType", ebnf: "border-bottom-color =\n ColorType | Image1dType", valueType: "keyword", defaultValue: "#2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 161, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003cflex\u003e", samples: ["1fr", "2fr", "3fr"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("#c5483c", "border-bottom-color: #c5483c;"), v("#2f5fd0", "border-bottom-color: #2f5fd0;"), v("rgb(50%, 80%, 30%, 0.75)", "border-bottom-color: rgb(50%, 80%, 30%, 0.75);"), v("rgb(1, 0.5, 2, 0.75)", "border-bottom-color: rgb(1, 0.5, 2, 0.75);"), v("rgb(from #c5483c 80% 65% 100%/ 2)", "border-bottom-color: rgb(from #c5483c 80% 65% 100%/ 2);"), v("rgba(50%, 80%, 30%, 0.75)", "border-bottom-color: rgba(50%, 80%, 30%, 0.75);"), v("rgba(1, 0.5, 2, 0.75)", "border-bottom-color: rgba(1, 0.5, 2, 0.75);"), v("rgba(from #c5483c 80% 65% 100%/ 2)", "border-bottom-color: rgba(from #c5483c 80% 65% 100%/ 2);"), v("hsl(45deg, 30%, 65%, 0.25)", "border-bottom-color: hsl(45deg, 30%, 65%, 0.25);"), v("hsl(from #c5483c 135deg 65% 100%/ 2)", "border-bottom-color: hsl(from #c5483c 135deg 65% 100%/ 2);"), v("hsla(45deg, 30%, 65%, 0.25)", "border-bottom-color: hsla(45deg, 30%, 65%, 0.25);"), v("hsla(from #c5483c 135deg 65% 100%/ 2)", "border-bottom-color: hsla(from #c5483c 135deg 65% 100%/ 2);"), v("hwb(from #c5483c 135deg 65% 100%/ 2)", "border-bottom-color: hwb(from #c5483c 135deg 65% 100%/ 2);"), v("lab(from #c5483c 80% 15% 80%/ 1)", "border-bottom-color: lab(from #c5483c 80% 15% 80%/ 1);"), v("lch(from #c5483c 80% 15% 250deg/ 1)", "border-bottom-color: lch(from #c5483c 80% 15% 250deg/ 1);"), v("oklab(from #c5483c 80% 15% 80%/ 1)", "border-bottom-color: oklab(from #c5483c 80% 15% 80%/ 1);"), v("oklch(from #c5483c 80% 15% 250deg/ 1)", "border-bottom-color: oklch(from #c5483c 80% 15% 250deg/ 1);"), v("ictcp(from #c5483c 80% 15% 80%/ 1)", "border-bottom-color: ictcp(from #c5483c 80% 15% 80%/ 1);"), v("jzazbz(from #c5483c 80% 15% 80%/ 1)", "border-bottom-color: jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("jzczhz(from #c5483c 80% 15% 250deg/ 1)", "border-bottom-color: jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("alpha(from #c5483c/ 0.5)", "border-bottom-color: alpha(from #c5483c/ 0.5);"), v("color(from #c5483c --my-var 2/ 0.5)", "border-bottom-color: color(from #c5483c --my-var 2/ 0.5);"), v("color-hdr(#c5483c 0.5, #c5483c 0.75)", "border-bottom-color: color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("aliceblue", "border-bottom-color: aliceblue;"), v("antiquewhite", "border-bottom-color: antiquewhite;"), v("aqua", "border-bottom-color: aqua;"), v("aquamarine", "border-bottom-color: aquamarine;"), v("azure", "border-bottom-color: azure;"), v("beige", "border-bottom-color: beige;"), v("bisque", "border-bottom-color: bisque;"), v("black", "border-bottom-color: black;"), v("blanchedalmond", "border-bottom-color: blanchedalmond;"), v("blue", "border-bottom-color: blue;"), v("blueviolet", "border-bottom-color: blueviolet;"), v("brown", "border-bottom-color: brown;"), v("burlywood", "border-bottom-color: burlywood;"), v("cadetblue", "border-bottom-color: cadetblue;"), v("chartreuse", "border-bottom-color: chartreuse;"), v("chocolate", "border-bottom-color: chocolate;"), v("coral", "border-bottom-color: coral;"), v("cornflowerblue", "border-bottom-color: cornflowerblue;"), v("cornsilk", "border-bottom-color: cornsilk;"), v("crimson", "border-bottom-color: crimson;"), v("cyan", "border-bottom-color: cyan;"), v("darkblue", "border-bottom-color: darkblue;"), v("darkcyan", "border-bottom-color: darkcyan;"), v("darkgoldenrod", "border-bottom-color: darkgoldenrod;"), v("darkgray", "border-bottom-color: darkgray;"), v("darkgreen", "border-bottom-color: darkgreen;"), v("darkgrey", "border-bottom-color: darkgrey;"), ], }, { number: 213, name: "border-bottom-left-radius", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-bottom-left-radius\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "NonNegativeLengthPercentageType , [ NonNegativeLengthPercentageType ]", ebnf: "border-bottom-left-radius =\n NonNegativeLengthPercentageType , [ NonNegativeLengthPercentageType ]", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 18, shown: 18, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "border-bottom-left-radius: 24px;"), v("48px", "border-bottom-left-radius: 48px;"), v("8px", "border-bottom-left-radius: 8px;"), v("16px", "border-bottom-left-radius: 16px;"), v("64px", "border-bottom-left-radius: 64px;"), v("50%", "border-bottom-left-radius: 50%;"), v("80%", "border-bottom-left-radius: 80%;"), v("30%", "border-bottom-left-radius: 30%;"), v("65%", "border-bottom-left-radius: 65%;"), v("15%", "border-bottom-left-radius: 15%;"), v("100%", "border-bottom-left-radius: 100%;"), v("calc(24px)", "border-bottom-left-radius: calc(24px);"), v("clamp(24px, 2em, 48px)", "border-bottom-left-radius: clamp(24px, 2em, 48px);"), v("min(24px)", "border-bottom-left-radius: min(24px);"), v("max(24px)", "border-bottom-left-radius: max(24px);"), v("round(nearest, 24px, 2em)", "border-bottom-left-radius: round(nearest, 24px, 2em);"), v("abs(24px)", "border-bottom-left-radius: abs(24px);"), v("env(my-ident, 48px)", "border-bottom-left-radius: env(my-ident, 48px);"), ], }, { number: 214, name: "border-bottom-right-radius", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-bottom-right-radius\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "NonNegativeLengthPercentageType , [ NonNegativeLengthPercentageType ]", ebnf: "border-bottom-right-radius =\n NonNegativeLengthPercentageType , [ NonNegativeLengthPercentageType ]", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 18, shown: 18, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "border-bottom-right-radius: 24px;"), v("48px", "border-bottom-right-radius: 48px;"), v("8px", "border-bottom-right-radius: 8px;"), v("16px", "border-bottom-right-radius: 16px;"), v("64px", "border-bottom-right-radius: 64px;"), v("50%", "border-bottom-right-radius: 50%;"), v("80%", "border-bottom-right-radius: 80%;"), v("30%", "border-bottom-right-radius: 30%;"), v("65%", "border-bottom-right-radius: 65%;"), v("15%", "border-bottom-right-radius: 15%;"), v("100%", "border-bottom-right-radius: 100%;"), v("calc(24px)", "border-bottom-right-radius: calc(24px);"), v("clamp(24px, 2em, 48px)", "border-bottom-right-radius: clamp(24px, 2em, 48px);"), v("min(24px)", "border-bottom-right-radius: min(24px);"), v("max(24px)", "border-bottom-right-radius: max(24px);"), v("round(nearest, 24px, 2em)", "border-bottom-right-radius: round(nearest, 24px, 2em);"), v("abs(24px)", "border-bottom-right-radius: abs(24px);"), v("env(my-ident, 48px)", "border-bottom-right-radius: env(my-ident, 48px);"), ], }, { number: 215, name: "border-bottom-style", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-bottom-style\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the line style of an element's bottom \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border\"\u003e\u003ccode\u003eborder\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LineStyleType", ebnf: "border-bottom-style =\n LineStyleType", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: false, trueCount: 10, shown: 10, assists: [], values: [ v("solid", "border-bottom-style: solid;"), v("none", "border-bottom-style: none;"), v("hidden", "border-bottom-style: hidden;"), v("dotted", "border-bottom-style: dotted;"), v("dashed", "border-bottom-style: dashed;"), v("double", "border-bottom-style: double;"), v("groove", "border-bottom-style: groove;"), v("ridge", "border-bottom-style: ridge;"), v("inset", "border-bottom-style: inset;"), v("outset", "border-bottom-style: outset;"), ], }, { number: 216, name: "border-bottom-width", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-bottom-width\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the width of the bottom border of an element.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LineWidthType", ebnf: "border-bottom-width =\n LineWidthType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 8, shown: 8, assists: [{ type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "border-bottom-width: 24px;"), v("48px", "border-bottom-width: 48px;"), v("8px", "border-bottom-width: 8px;"), v("16px", "border-bottom-width: 16px;"), v("64px", "border-bottom-width: 64px;"), v("thin", "border-bottom-width: thin;"), v("medium", "border-bottom-width: medium;"), v("thick", "border-bottom-width: thick;"), ], }, { number: 217, name: "border-collapse", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-collapse\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets whether cells inside a \u003ca href=\"/en-US/docs/Web/HTML/Reference/Elements/table\"\u003e\u003ccode\u003e\u0026lt;table\u0026gt;\u003c/code\u003e\u003c/a\u003e have shared or separate borders.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"separate\" | \"collapse\"", ebnf: "border-collapse =\n \"separate\" | \"collapse\"", valueType: "keyword", defaultValue: "collapse", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("separate", "border-collapse: separate;"), v("collapse", "border-collapse: collapse;"), ], }, { number: 218, name: "border-color", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-color\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the color of an element's border.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BorderColorPropItem , [ BorderColorPropItem ] , [ BorderColorPropItem ] , [ BorderColorPropItem ]", ebnf: "border-color =\n BorderColorPropItem , [ BorderColorPropItem ] , [ BorderColorPropItem ] , [ BorderColorPropItem ]", valueType: "keyword", defaultValue: "#2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003cflex\u003e", samples: ["1fr", "2fr", "3fr"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("#c5483c", "border-color: #c5483c;"), v("#2f5fd0", "border-color: #2f5fd0;"), v("rgb(50%, 80%, 30%, 0.75)", "border-color: rgb(50%, 80%, 30%, 0.75);"), v("rgb(1, 0.5, 2, 0.75)", "border-color: rgb(1, 0.5, 2, 0.75);"), v("rgb(from #c5483c 80% 65% 100%/ 2)", "border-color: rgb(from #c5483c 80% 65% 100%/ 2);"), v("rgba(50%, 80%, 30%, 0.75)", "border-color: rgba(50%, 80%, 30%, 0.75);"), v("rgba(1, 0.5, 2, 0.75)", "border-color: rgba(1, 0.5, 2, 0.75);"), v("rgba(from #c5483c 80% 65% 100%/ 2)", "border-color: rgba(from #c5483c 80% 65% 100%/ 2);"), v("hsl(45deg, 30%, 65%, 0.25)", "border-color: hsl(45deg, 30%, 65%, 0.25);"), v("hsl(from #c5483c 135deg 65% 100%/ 2)", "border-color: hsl(from #c5483c 135deg 65% 100%/ 2);"), v("hsla(45deg, 30%, 65%, 0.25)", "border-color: hsla(45deg, 30%, 65%, 0.25);"), v("hsla(from #c5483c 135deg 65% 100%/ 2)", "border-color: hsla(from #c5483c 135deg 65% 100%/ 2);"), v("hwb(from #c5483c 135deg 65% 100%/ 2)", "border-color: hwb(from #c5483c 135deg 65% 100%/ 2);"), v("lab(from #c5483c 80% 15% 80%/ 1)", "border-color: lab(from #c5483c 80% 15% 80%/ 1);"), v("lch(from #c5483c 80% 15% 250deg/ 1)", "border-color: lch(from #c5483c 80% 15% 250deg/ 1);"), v("oklab(from #c5483c 80% 15% 80%/ 1)", "border-color: oklab(from #c5483c 80% 15% 80%/ 1);"), v("oklch(from #c5483c 80% 15% 250deg/ 1)", "border-color: oklch(from #c5483c 80% 15% 250deg/ 1);"), v("ictcp(from #c5483c 80% 15% 80%/ 1)", "border-color: ictcp(from #c5483c 80% 15% 80%/ 1);"), v("jzazbz(from #c5483c 80% 15% 80%/ 1)", "border-color: jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("jzczhz(from #c5483c 80% 15% 250deg/ 1)", "border-color: jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("alpha(from #c5483c/ 0.5)", "border-color: alpha(from #c5483c/ 0.5);"), v("color(from #c5483c --my-var 2/ 0.5)", "border-color: color(from #c5483c --my-var 2/ 0.5);"), v("color-hdr(#c5483c 0.5, #c5483c 0.75)", "border-color: color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("aliceblue", "border-color: aliceblue;"), v("antiquewhite", "border-color: antiquewhite;"), v("aqua", "border-color: aqua;"), v("aquamarine", "border-color: aquamarine;"), v("azure", "border-color: azure;"), v("beige", "border-color: beige;"), v("bisque", "border-color: bisque;"), v("black", "border-color: black;"), v("blanchedalmond", "border-color: blanchedalmond;"), v("blue", "border-color: blue;"), v("blueviolet", "border-color: blueviolet;"), v("brown", "border-color: brown;"), v("burlywood", "border-color: burlywood;"), v("cadetblue", "border-color: cadetblue;"), v("chartreuse", "border-color: chartreuse;"), v("chocolate", "border-color: chocolate;"), v("coral", "border-color: coral;"), v("cornflowerblue", "border-color: cornflowerblue;"), v("cornsilk", "border-color: cornsilk;"), v("crimson", "border-color: crimson;"), v("cyan", "border-color: cyan;"), v("darkblue", "border-color: darkblue;"), v("darkcyan", "border-color: darkcyan;"), v("darkgoldenrod", "border-color: darkgoldenrod;"), v("darkgray", "border-color: darkgray;"), v("darkgreen", "border-color: darkgreen;"), v("darkgrey", "border-color: darkgrey;"), ], }, { number: 219, name: "border-end-end-radius", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-end-end-radius\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e. This is useful when building styles to work regardless of the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003etext orientation\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Guides/Writing_modes\"\u003ewriting mode\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "NonNegativeLengthPercentageType , [ NonNegativeLengthPercentageType ]", ebnf: "border-end-end-radius =\n NonNegativeLengthPercentageType , [ NonNegativeLengthPercentageType ]", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 18, shown: 18, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "border-end-end-radius: 24px;"), v("48px", "border-end-end-radius: 48px;"), v("8px", "border-end-end-radius: 8px;"), v("16px", "border-end-end-radius: 16px;"), v("64px", "border-end-end-radius: 64px;"), v("50%", "border-end-end-radius: 50%;"), v("80%", "border-end-end-radius: 80%;"), v("30%", "border-end-end-radius: 30%;"), v("65%", "border-end-end-radius: 65%;"), v("15%", "border-end-end-radius: 15%;"), v("100%", "border-end-end-radius: 100%;"), v("calc(24px)", "border-end-end-radius: calc(24px);"), v("clamp(24px, 2em, 48px)", "border-end-end-radius: clamp(24px, 2em, 48px);"), v("min(24px)", "border-end-end-radius: min(24px);"), v("max(24px)", "border-end-end-radius: max(24px);"), v("round(nearest, 24px, 2em)", "border-end-end-radius: round(nearest, 24px, 2em);"), v("abs(24px)", "border-end-end-radius: abs(24px);"), v("env(my-ident, 48px)", "border-end-end-radius: env(my-ident, 48px);"), ], }, { number: 220, name: "border-end-start-radius", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-end-start-radius\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines a logical border radius on an element, which maps to a physical border radius depending on the element's \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e. This is useful when building styles to work regardless of the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003etext orientation\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Guides/Writing_modes\"\u003ewriting mode\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "NonNegativeLengthPercentageType , [ NonNegativeLengthPercentageType ]", ebnf: "border-end-start-radius =\n NonNegativeLengthPercentageType , [ NonNegativeLengthPercentageType ]", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 18, shown: 18, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "border-end-start-radius: 24px;"), v("48px", "border-end-start-radius: 48px;"), v("8px", "border-end-start-radius: 8px;"), v("16px", "border-end-start-radius: 16px;"), v("64px", "border-end-start-radius: 64px;"), v("50%", "border-end-start-radius: 50%;"), v("80%", "border-end-start-radius: 80%;"), v("30%", "border-end-start-radius: 30%;"), v("65%", "border-end-start-radius: 65%;"), v("15%", "border-end-start-radius: 15%;"), v("100%", "border-end-start-radius: 100%;"), v("calc(24px)", "border-end-start-radius: calc(24px);"), v("clamp(24px, 2em, 48px)", "border-end-start-radius: clamp(24px, 2em, 48px);"), v("min(24px)", "border-end-start-radius: min(24px);"), v("max(24px)", "border-end-start-radius: max(24px);"), v("round(nearest, 24px, 2em)", "border-end-start-radius: round(nearest, 24px, 2em);"), v("abs(24px)", "border-end-start-radius: abs(24px);"), v("env(my-ident, 48px)", "border-end-start-radius: env(my-ident, 48px);"), ], }, { number: 221, name: "border-image", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-image\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property draws an image around a given element. It replaces the element's regular \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border\"\u003eborder\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "[ BorderImageSourceProp ] , [ BorderImageSliceProp , [ ( \"/\" , BorderImageWidthProp | \"/\" , [ BorderImageWidthProp ] , \"/\" , BorderImageOutsetProp ) ] ] , [ BorderImageRepeatProp ]", ebnf: "border-image =\n [ BorderImageSourceProp ] , [ BorderImageSliceProp , [ ( \"/\" , BorderImageWidthProp | \"/\" , [ BorderImageWidthProp ] , \"/\" , BorderImageOutsetProp ) ] ] , [ BorderImageRepeatProp ]", valueType: "length", defaultValue: "url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px repeat", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cresolution\u003e", samples: ["96dpi", "2x", "300dpi"] }, { type: "\u003cstring\u003e", samples: ["\"Specimen\"", "\"Aa\""] }, { type: "BorderImageOutsetList", samples: ["4px 8px 2px 6px", "1 2 3 0.5", "10px", "2 5", "0"] }, { type: "BorderImageSliceList", samples: ["30% 10% 20% 5%", "0.5 3 1 0.75", "33%", "2 4 6 8", "1 2 3"] }, { type: "BorderImageWidthList", samples: ["4px 8px 2px 6px", "2 1 3 auto", "10px", "30% 10% 20% 5%", "1 4"] }, { type: "ConicGradientFn", samples: ["conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c)"] }, { type: "LinearGradientFn", samples: ["linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)"] }, { type: "RadialGradientFn", samples: ["radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)"] }, { type: "RepeatingConicGradientFn", samples: ["repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg)"] }, { type: "RepeatingLinearGradientFn", samples: ["repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)"] }, { type: "RepeatingRadialGradientFn", samples: ["repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px)"] }, { type: "UrlType", samples: ["url(assets/photo.jpg)"] }], values: [ v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px stretch", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px stretch;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px repeat", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px repeat;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px round", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px round;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px space", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px space;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 2 1 3 auto stretch", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 2 1 3 auto stretch;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 2 1 3 auto repeat", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 2 1 3 auto repeat;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 2 1 3 auto round", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 2 1 3 auto round;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 2 1 3 auto space", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 2 1 3 auto space;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 2 1 3 auto", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 2 1 3 auto;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 10px stretch", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 10px stretch;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 10px repeat", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 10px repeat;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 10px round", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 10px round;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 10px space", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 10px space;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 10px", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 10px;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 30% 10% 20% 5% stretch", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 30% 10% 20% 5% stretch;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 30% 10% 20% 5% repeat", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 30% 10% 20% 5% repeat;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 30% 10% 20% 5% round", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 30% 10% 20% 5% round;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 30% 10% 20% 5% space", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 30% 10% 20% 5% space;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 30% 10% 20% 5%", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 30% 10% 20% 5%;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 1 4 stretch", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 1 4 stretch;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 1 4 repeat", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 1 4 repeat;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 1 4 round", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 1 4 round;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 1 4 space", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 1 4 space;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 1 4", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 1 4;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px stretch", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px stretch;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px repeat", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px repeat;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px round", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px round;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px space", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px space;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 stretch", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 stretch;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 repeat", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 repeat;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 round", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 round;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 space", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 space;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px stretch", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px stretch;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px repeat", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px repeat;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px round", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px round;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px space", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px space;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 2 5 stretch", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 2 5 stretch;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 2 5 repeat", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 2 5 repeat;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 2 5 round", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 2 5 round;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 2 5 space", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 2 5 space;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 2 5", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 2 5;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 0 stretch", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 0 stretch;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 0 repeat", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 0 repeat;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 0 round", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 0 round;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 0 space", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 0 space;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 0", "border-image: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 0;"), ], }, { number: 222, name: "border-image-outset", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-image-outset\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the distance by which an element's \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-image\"\u003eborder image\u003c/a\u003e is set out from its border box.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BorderImageOutsetList", ebnf: "border-image-outset =\n BorderImageOutsetList", valueType: "keyword", defaultValue: "1 2 3 0.5", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "BorderImageOutsetList", samples: ["4px 8px 2px 6px", "1 2 3 0.5", "10px", "2 5", "0"] }], values: [ v("4px 8px 2px 6px", "border-image-outset: 4px 8px 2px 6px;"), v("1 2 3 0.5", "border-image-outset: 1 2 3 0.5;"), v("10px", "border-image-outset: 10px;"), v("2 5", "border-image-outset: 2 5;"), v("0", "border-image-outset: 0;"), ], }, { number: 223, name: "border-image-repeat", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-image-repeat\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines how the images for the sides and the middle part of the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-image\"\u003eborder image\u003c/a\u003e are scaled and tiled. The middle region can be displayed by using the keyword \"fill\" in the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-image-slice\"\u003e\u003ccode\u003eborder-image-slice\u003c/code\u003e\u003c/a\u003e property.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BorderImageRepeatPropItem , [ BorderImageRepeatPropItem ]", ebnf: "border-image-repeat =\n BorderImageRepeatPropItem , [ BorderImageRepeatPropItem ]", valueType: "keyword", defaultValue: "repeat", related: [], provenance: "pure", truncated: false, trueCount: 4, shown: 4, assists: [], values: [ v("stretch", "border-image-repeat: stretch;"), v("repeat", "border-image-repeat: repeat;"), v("round", "border-image-repeat: round;"), v("space", "border-image-repeat: space;"), ], }, { number: 224, name: "border-image-slice", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-image-slice\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property divides the image specified by \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-image-source\"\u003e\u003ccode\u003eborder-image-source\u003c/code\u003e\u003c/a\u003e into regions. These regions form the components of an element's \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-image\"\u003eborder image\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BorderImageSliceList , [ \"fill\" ]", ebnf: "border-image-slice =\n BorderImageSliceList , [ \"fill\" ]", valueType: "keyword", defaultValue: "30% 10% 20% 5%", related: [], provenance: "assisted", truncated: false, trueCount: 10, shown: 10, assists: [{ type: "BorderImageSliceList", samples: ["30% 10% 20% 5%", "0.5 3 1 0.75", "33%", "2 4 6 8", "1 2 3"] }], values: [ v("30% 10% 20% 5% fill", "border-image-slice: 30% 10% 20% 5% fill;"), v("30% 10% 20% 5%", "border-image-slice: 30% 10% 20% 5%;"), v("0.5 3 1 0.75 fill", "border-image-slice: 0.5 3 1 0.75 fill;"), v("0.5 3 1 0.75", "border-image-slice: 0.5 3 1 0.75;"), v("33% fill", "border-image-slice: 33% fill;"), v("33%", "border-image-slice: 33%;"), v("2 4 6 8 fill", "border-image-slice: 2 4 6 8 fill;"), v("2 4 6 8", "border-image-slice: 2 4 6 8;"), v("1 2 3 fill", "border-image-slice: 1 2 3 fill;"), v("1 2 3", "border-image-slice: 1 2 3;"), ], }, { number: 225, name: "border-image-source", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-image-source\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the source image used to create an element's \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-image\"\u003eborder image\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ImageType | \"none\"", ebnf: "border-image-source =\n ImageType | \"none\"", valueType: "function", defaultValue: "image(ltr url(assets/photo.jpg))", related: [], provenance: "assisted", truncated: false, trueCount: 13, shown: 13, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cresolution\u003e", samples: ["96dpi", "2x", "300dpi"] }, { type: "\u003cstring\u003e", samples: ["\"Specimen\"", "\"Aa\""] }, { type: "ConicGradientFn", samples: ["conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c)"] }, { type: "LinearGradientFn", samples: ["linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)"] }, { type: "RadialGradientFn", samples: ["radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)"] }, { type: "RepeatingConicGradientFn", samples: ["repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg)"] }, { type: "RepeatingLinearGradientFn", samples: ["repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)"] }, { type: "RepeatingRadialGradientFn", samples: ["repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px)"] }, { type: "UrlType", samples: ["url(assets/photo.jpg)"] }], values: [ v("url(assets/photo.jpg)", "border-image-source: url(assets/photo.jpg);"), v("image(ltr url(assets/photo.jpg))", "border-image-source: image(ltr url(assets/photo.jpg));"), v("image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\"))", "border-image-source: image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\"));"), v("cross-fade(url(assets/photo.jpg) 30%)", "border-image-source: cross-fade(url(assets/photo.jpg) 30%);"), v("element(#alpha)", "border-image-source: element(#alpha);"), v("linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)", "border-image-source: linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0);"), v("repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)", "border-image-source: repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px);"), v("radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)", "border-image-source: radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0);"), v("repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px)", "border-image-source: repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px);"), v("conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c)", "border-image-source: conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c);"), v("repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg)", "border-image-source: repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg);"), v("light-dark(url(assets/photo.jpg), url(assets/photo.jpg))", "border-image-source: light-dark(url(assets/photo.jpg), url(assets/photo.jpg));"), v("none", "border-image-source: none;"), ], }, { number: 226, name: "border-image-width", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-image-width\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the width of an element's \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-image\"\u003eborder image\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BorderImageWidthList", ebnf: "border-image-width =\n BorderImageWidthList", valueType: "keyword", defaultValue: "2 1 3 auto", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "BorderImageWidthList", samples: ["4px 8px 2px 6px", "2 1 3 auto", "10px", "30% 10% 20% 5%", "1 4"] }], values: [ v("4px 8px 2px 6px", "border-image-width: 4px 8px 2px 6px;"), v("2 1 3 auto", "border-image-width: 2 1 3 auto;"), v("10px", "border-image-width: 10px;"), v("30% 10% 20% 5%", "border-image-width: 30% 10% 20% 5%;"), v("1 4", "border-image-width: 1 4;"), ], }, { number: 227, name: "border-inline", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-inline\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property is a \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e for setting the individual logical inline border property values in a single place in the style sheet.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BorderBlockStartProp", ebnf: "border-inline =\n BorderBlockStartProp", valueType: "length", defaultValue: "24px solid #2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px solid #c5483c", "border-inline: 24px solid #c5483c;"), v("24px solid #2f5fd0", "border-inline: 24px solid #2f5fd0;"), v("24px solid rgb(50%, 80%, 30%, 0.75)", "border-inline: 24px solid rgb(50%, 80%, 30%, 0.75);"), v("24px solid rgb(1, 0.5, 2, 0.75)", "border-inline: 24px solid rgb(1, 0.5, 2, 0.75);"), v("24px solid rgb(from #c5483c 80% 65% 100%/ 2)", "border-inline: 24px solid rgb(from #c5483c 80% 65% 100%/ 2);"), v("24px solid rgba(50%, 80%, 30%, 0.75)", "border-inline: 24px solid rgba(50%, 80%, 30%, 0.75);"), v("24px solid rgba(1, 0.5, 2, 0.75)", "border-inline: 24px solid rgba(1, 0.5, 2, 0.75);"), v("24px solid rgba(from #c5483c 80% 65% 100%/ 2)", "border-inline: 24px solid rgba(from #c5483c 80% 65% 100%/ 2);"), v("24px solid hsl(45deg, 30%, 65%, 0.25)", "border-inline: 24px solid hsl(45deg, 30%, 65%, 0.25);"), v("24px solid hsl(from #c5483c 135deg 65% 100%/ 2)", "border-inline: 24px solid hsl(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid hsla(45deg, 30%, 65%, 0.25)", "border-inline: 24px solid hsla(45deg, 30%, 65%, 0.25);"), v("24px solid hsla(from #c5483c 135deg 65% 100%/ 2)", "border-inline: 24px solid hsla(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid hwb(from #c5483c 135deg 65% 100%/ 2)", "border-inline: 24px solid hwb(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid lab(from #c5483c 80% 15% 80%/ 1)", "border-inline: 24px solid lab(from #c5483c 80% 15% 80%/ 1);"), v("24px solid lch(from #c5483c 80% 15% 250deg/ 1)", "border-inline: 24px solid lch(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid oklab(from #c5483c 80% 15% 80%/ 1)", "border-inline: 24px solid oklab(from #c5483c 80% 15% 80%/ 1);"), v("24px solid oklch(from #c5483c 80% 15% 250deg/ 1)", "border-inline: 24px solid oklch(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid ictcp(from #c5483c 80% 15% 80%/ 1)", "border-inline: 24px solid ictcp(from #c5483c 80% 15% 80%/ 1);"), v("24px solid jzazbz(from #c5483c 80% 15% 80%/ 1)", "border-inline: 24px solid jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("24px solid jzczhz(from #c5483c 80% 15% 250deg/ 1)", "border-inline: 24px solid jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid alpha(from #c5483c/ 0.5)", "border-inline: 24px solid alpha(from #c5483c/ 0.5);"), v("24px solid color(from #c5483c --my-var 2/ 0.5)", "border-inline: 24px solid color(from #c5483c --my-var 2/ 0.5);"), v("24px solid color-hdr(#c5483c 0.5, #c5483c 0.75)", "border-inline: 24px solid color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("24px solid aliceblue", "border-inline: 24px solid aliceblue;"), v("24px solid antiquewhite", "border-inline: 24px solid antiquewhite;"), v("24px solid aqua", "border-inline: 24px solid aqua;"), v("24px solid aquamarine", "border-inline: 24px solid aquamarine;"), v("24px solid azure", "border-inline: 24px solid azure;"), v("24px solid beige", "border-inline: 24px solid beige;"), v("24px solid bisque", "border-inline: 24px solid bisque;"), v("24px solid black", "border-inline: 24px solid black;"), v("24px solid blanchedalmond", "border-inline: 24px solid blanchedalmond;"), v("24px solid blue", "border-inline: 24px solid blue;"), v("24px solid blueviolet", "border-inline: 24px solid blueviolet;"), v("24px solid brown", "border-inline: 24px solid brown;"), v("24px solid burlywood", "border-inline: 24px solid burlywood;"), v("24px solid cadetblue", "border-inline: 24px solid cadetblue;"), v("24px solid chartreuse", "border-inline: 24px solid chartreuse;"), v("24px solid chocolate", "border-inline: 24px solid chocolate;"), v("24px solid coral", "border-inline: 24px solid coral;"), v("24px solid cornflowerblue", "border-inline: 24px solid cornflowerblue;"), v("24px solid cornsilk", "border-inline: 24px solid cornsilk;"), v("24px solid crimson", "border-inline: 24px solid crimson;"), v("24px solid cyan", "border-inline: 24px solid cyan;"), v("24px solid darkblue", "border-inline: 24px solid darkblue;"), v("24px solid darkcyan", "border-inline: 24px solid darkcyan;"), v("24px solid darkgoldenrod", "border-inline: 24px solid darkgoldenrod;"), v("24px solid darkgray", "border-inline: 24px solid darkgray;"), v("24px solid darkgreen", "border-inline: 24px solid darkgreen;"), v("24px solid darkgrey", "border-inline: 24px solid darkgrey;"), ], }, { number: 228, name: "border-inline-color", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-inline-color\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the color of the logical inline borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-top-color\"\u003e\u003ccode\u003eborder-top-color\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-bottom-color\"\u003e\u003ccode\u003eborder-bottom-color\u003c/code\u003e\u003c/a\u003e, or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-right-color\"\u003e\u003ccode\u003eborder-right-color\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-left-color\"\u003e\u003ccode\u003eborder-left-color\u003c/code\u003e\u003c/a\u003e property depending on the values defined for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BorderTopColorProp , [ BorderTopColorProp ]", ebnf: "border-inline-color =\n BorderTopColorProp , [ BorderTopColorProp ]", valueType: "keyword", defaultValue: "#2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 161, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003cflex\u003e", samples: ["1fr", "2fr", "3fr"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("#c5483c", "border-inline-color: #c5483c;"), v("#2f5fd0", "border-inline-color: #2f5fd0;"), v("rgb(50%, 80%, 30%, 0.75)", "border-inline-color: rgb(50%, 80%, 30%, 0.75);"), v("rgb(1, 0.5, 2, 0.75)", "border-inline-color: rgb(1, 0.5, 2, 0.75);"), v("rgb(from #c5483c 80% 65% 100%/ 2)", "border-inline-color: rgb(from #c5483c 80% 65% 100%/ 2);"), v("rgba(50%, 80%, 30%, 0.75)", "border-inline-color: rgba(50%, 80%, 30%, 0.75);"), v("rgba(1, 0.5, 2, 0.75)", "border-inline-color: rgba(1, 0.5, 2, 0.75);"), v("rgba(from #c5483c 80% 65% 100%/ 2)", "border-inline-color: rgba(from #c5483c 80% 65% 100%/ 2);"), v("hsl(45deg, 30%, 65%, 0.25)", "border-inline-color: hsl(45deg, 30%, 65%, 0.25);"), v("hsl(from #c5483c 135deg 65% 100%/ 2)", "border-inline-color: hsl(from #c5483c 135deg 65% 100%/ 2);"), v("hsla(45deg, 30%, 65%, 0.25)", "border-inline-color: hsla(45deg, 30%, 65%, 0.25);"), v("hsla(from #c5483c 135deg 65% 100%/ 2)", "border-inline-color: hsla(from #c5483c 135deg 65% 100%/ 2);"), v("hwb(from #c5483c 135deg 65% 100%/ 2)", "border-inline-color: hwb(from #c5483c 135deg 65% 100%/ 2);"), v("lab(from #c5483c 80% 15% 80%/ 1)", "border-inline-color: lab(from #c5483c 80% 15% 80%/ 1);"), v("lch(from #c5483c 80% 15% 250deg/ 1)", "border-inline-color: lch(from #c5483c 80% 15% 250deg/ 1);"), v("oklab(from #c5483c 80% 15% 80%/ 1)", "border-inline-color: oklab(from #c5483c 80% 15% 80%/ 1);"), v("oklch(from #c5483c 80% 15% 250deg/ 1)", "border-inline-color: oklch(from #c5483c 80% 15% 250deg/ 1);"), v("ictcp(from #c5483c 80% 15% 80%/ 1)", "border-inline-color: ictcp(from #c5483c 80% 15% 80%/ 1);"), v("jzazbz(from #c5483c 80% 15% 80%/ 1)", "border-inline-color: jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("jzczhz(from #c5483c 80% 15% 250deg/ 1)", "border-inline-color: jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("alpha(from #c5483c/ 0.5)", "border-inline-color: alpha(from #c5483c/ 0.5);"), v("color(from #c5483c --my-var 2/ 0.5)", "border-inline-color: color(from #c5483c --my-var 2/ 0.5);"), v("color-hdr(#c5483c 0.5, #c5483c 0.75)", "border-inline-color: color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("aliceblue", "border-inline-color: aliceblue;"), v("antiquewhite", "border-inline-color: antiquewhite;"), v("aqua", "border-inline-color: aqua;"), v("aquamarine", "border-inline-color: aquamarine;"), v("azure", "border-inline-color: azure;"), v("beige", "border-inline-color: beige;"), v("bisque", "border-inline-color: bisque;"), v("black", "border-inline-color: black;"), v("blanchedalmond", "border-inline-color: blanchedalmond;"), v("blue", "border-inline-color: blue;"), v("blueviolet", "border-inline-color: blueviolet;"), v("brown", "border-inline-color: brown;"), v("burlywood", "border-inline-color: burlywood;"), v("cadetblue", "border-inline-color: cadetblue;"), v("chartreuse", "border-inline-color: chartreuse;"), v("chocolate", "border-inline-color: chocolate;"), v("coral", "border-inline-color: coral;"), v("cornflowerblue", "border-inline-color: cornflowerblue;"), v("cornsilk", "border-inline-color: cornsilk;"), v("crimson", "border-inline-color: crimson;"), v("cyan", "border-inline-color: cyan;"), v("darkblue", "border-inline-color: darkblue;"), v("darkcyan", "border-inline-color: darkcyan;"), v("darkgoldenrod", "border-inline-color: darkgoldenrod;"), v("darkgray", "border-inline-color: darkgray;"), v("darkgreen", "border-inline-color: darkgreen;"), v("darkgrey", "border-inline-color: darkgrey;"), ], }, { number: 229, name: "border-inline-end", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-inline-end\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property is a \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e for setting the individual logical inline-end border property values in a single place in the style sheet.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "[ LineWidthType ] , [ LineStyleType ] , [ ColorType ]", ebnf: "border-inline-end =\n [ LineWidthType ] , [ LineStyleType ] , [ ColorType ]", valueType: "length", defaultValue: "24px solid #2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px solid #c5483c", "border-inline-end: 24px solid #c5483c;"), v("24px solid #2f5fd0", "border-inline-end: 24px solid #2f5fd0;"), v("24px solid rgb(50%, 80%, 30%, 0.75)", "border-inline-end: 24px solid rgb(50%, 80%, 30%, 0.75);"), v("24px solid rgb(1, 0.5, 2, 0.75)", "border-inline-end: 24px solid rgb(1, 0.5, 2, 0.75);"), v("24px solid rgb(from #c5483c 80% 65% 100%/ 2)", "border-inline-end: 24px solid rgb(from #c5483c 80% 65% 100%/ 2);"), v("24px solid rgba(50%, 80%, 30%, 0.75)", "border-inline-end: 24px solid rgba(50%, 80%, 30%, 0.75);"), v("24px solid rgba(1, 0.5, 2, 0.75)", "border-inline-end: 24px solid rgba(1, 0.5, 2, 0.75);"), v("24px solid rgba(from #c5483c 80% 65% 100%/ 2)", "border-inline-end: 24px solid rgba(from #c5483c 80% 65% 100%/ 2);"), v("24px solid hsl(45deg, 30%, 65%, 0.25)", "border-inline-end: 24px solid hsl(45deg, 30%, 65%, 0.25);"), v("24px solid hsl(from #c5483c 135deg 65% 100%/ 2)", "border-inline-end: 24px solid hsl(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid hsla(45deg, 30%, 65%, 0.25)", "border-inline-end: 24px solid hsla(45deg, 30%, 65%, 0.25);"), v("24px solid hsla(from #c5483c 135deg 65% 100%/ 2)", "border-inline-end: 24px solid hsla(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid hwb(from #c5483c 135deg 65% 100%/ 2)", "border-inline-end: 24px solid hwb(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid lab(from #c5483c 80% 15% 80%/ 1)", "border-inline-end: 24px solid lab(from #c5483c 80% 15% 80%/ 1);"), v("24px solid lch(from #c5483c 80% 15% 250deg/ 1)", "border-inline-end: 24px solid lch(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid oklab(from #c5483c 80% 15% 80%/ 1)", "border-inline-end: 24px solid oklab(from #c5483c 80% 15% 80%/ 1);"), v("24px solid oklch(from #c5483c 80% 15% 250deg/ 1)", "border-inline-end: 24px solid oklch(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid ictcp(from #c5483c 80% 15% 80%/ 1)", "border-inline-end: 24px solid ictcp(from #c5483c 80% 15% 80%/ 1);"), v("24px solid jzazbz(from #c5483c 80% 15% 80%/ 1)", "border-inline-end: 24px solid jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("24px solid jzczhz(from #c5483c 80% 15% 250deg/ 1)", "border-inline-end: 24px solid jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid alpha(from #c5483c/ 0.5)", "border-inline-end: 24px solid alpha(from #c5483c/ 0.5);"), v("24px solid color(from #c5483c --my-var 2/ 0.5)", "border-inline-end: 24px solid color(from #c5483c --my-var 2/ 0.5);"), v("24px solid color-hdr(#c5483c 0.5, #c5483c 0.75)", "border-inline-end: 24px solid color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("24px solid aliceblue", "border-inline-end: 24px solid aliceblue;"), v("24px solid antiquewhite", "border-inline-end: 24px solid antiquewhite;"), v("24px solid aqua", "border-inline-end: 24px solid aqua;"), v("24px solid aquamarine", "border-inline-end: 24px solid aquamarine;"), v("24px solid azure", "border-inline-end: 24px solid azure;"), v("24px solid beige", "border-inline-end: 24px solid beige;"), v("24px solid bisque", "border-inline-end: 24px solid bisque;"), v("24px solid black", "border-inline-end: 24px solid black;"), v("24px solid blanchedalmond", "border-inline-end: 24px solid blanchedalmond;"), v("24px solid blue", "border-inline-end: 24px solid blue;"), v("24px solid blueviolet", "border-inline-end: 24px solid blueviolet;"), v("24px solid brown", "border-inline-end: 24px solid brown;"), v("24px solid burlywood", "border-inline-end: 24px solid burlywood;"), v("24px solid cadetblue", "border-inline-end: 24px solid cadetblue;"), v("24px solid chartreuse", "border-inline-end: 24px solid chartreuse;"), v("24px solid chocolate", "border-inline-end: 24px solid chocolate;"), v("24px solid coral", "border-inline-end: 24px solid coral;"), v("24px solid cornflowerblue", "border-inline-end: 24px solid cornflowerblue;"), v("24px solid cornsilk", "border-inline-end: 24px solid cornsilk;"), v("24px solid crimson", "border-inline-end: 24px solid crimson;"), v("24px solid cyan", "border-inline-end: 24px solid cyan;"), v("24px solid darkblue", "border-inline-end: 24px solid darkblue;"), v("24px solid darkcyan", "border-inline-end: 24px solid darkcyan;"), v("24px solid darkgoldenrod", "border-inline-end: 24px solid darkgoldenrod;"), v("24px solid darkgray", "border-inline-end: 24px solid darkgray;"), v("24px solid darkgreen", "border-inline-end: 24px solid darkgreen;"), v("24px solid darkgrey", "border-inline-end: 24px solid darkgrey;"), ], }, { number: 230, name: "border-inline-end-color", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-inline-end-color\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the color of the logical inline-end border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-top-color\"\u003e\u003ccode\u003eborder-top-color\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-right-color\"\u003e\u003ccode\u003eborder-right-color\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-bottom-color\"\u003e\u003ccode\u003eborder-bottom-color\u003c/code\u003e\u003c/a\u003e, or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-left-color\"\u003e\u003ccode\u003eborder-left-color\u003c/code\u003e\u003c/a\u003e property depending on the values defined for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ColorType | Image1dType", ebnf: "border-inline-end-color =\n ColorType | Image1dType", valueType: "keyword", defaultValue: "#2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 161, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003cflex\u003e", samples: ["1fr", "2fr", "3fr"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("#c5483c", "border-inline-end-color: #c5483c;"), v("#2f5fd0", "border-inline-end-color: #2f5fd0;"), v("rgb(50%, 80%, 30%, 0.75)", "border-inline-end-color: rgb(50%, 80%, 30%, 0.75);"), v("rgb(1, 0.5, 2, 0.75)", "border-inline-end-color: rgb(1, 0.5, 2, 0.75);"), v("rgb(from #c5483c 80% 65% 100%/ 2)", "border-inline-end-color: rgb(from #c5483c 80% 65% 100%/ 2);"), v("rgba(50%, 80%, 30%, 0.75)", "border-inline-end-color: rgba(50%, 80%, 30%, 0.75);"), v("rgba(1, 0.5, 2, 0.75)", "border-inline-end-color: rgba(1, 0.5, 2, 0.75);"), v("rgba(from #c5483c 80% 65% 100%/ 2)", "border-inline-end-color: rgba(from #c5483c 80% 65% 100%/ 2);"), v("hsl(45deg, 30%, 65%, 0.25)", "border-inline-end-color: hsl(45deg, 30%, 65%, 0.25);"), v("hsl(from #c5483c 135deg 65% 100%/ 2)", "border-inline-end-color: hsl(from #c5483c 135deg 65% 100%/ 2);"), v("hsla(45deg, 30%, 65%, 0.25)", "border-inline-end-color: hsla(45deg, 30%, 65%, 0.25);"), v("hsla(from #c5483c 135deg 65% 100%/ 2)", "border-inline-end-color: hsla(from #c5483c 135deg 65% 100%/ 2);"), v("hwb(from #c5483c 135deg 65% 100%/ 2)", "border-inline-end-color: hwb(from #c5483c 135deg 65% 100%/ 2);"), v("lab(from #c5483c 80% 15% 80%/ 1)", "border-inline-end-color: lab(from #c5483c 80% 15% 80%/ 1);"), v("lch(from #c5483c 80% 15% 250deg/ 1)", "border-inline-end-color: lch(from #c5483c 80% 15% 250deg/ 1);"), v("oklab(from #c5483c 80% 15% 80%/ 1)", "border-inline-end-color: oklab(from #c5483c 80% 15% 80%/ 1);"), v("oklch(from #c5483c 80% 15% 250deg/ 1)", "border-inline-end-color: oklch(from #c5483c 80% 15% 250deg/ 1);"), v("ictcp(from #c5483c 80% 15% 80%/ 1)", "border-inline-end-color: ictcp(from #c5483c 80% 15% 80%/ 1);"), v("jzazbz(from #c5483c 80% 15% 80%/ 1)", "border-inline-end-color: jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("jzczhz(from #c5483c 80% 15% 250deg/ 1)", "border-inline-end-color: jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("alpha(from #c5483c/ 0.5)", "border-inline-end-color: alpha(from #c5483c/ 0.5);"), v("color(from #c5483c --my-var 2/ 0.5)", "border-inline-end-color: color(from #c5483c --my-var 2/ 0.5);"), v("color-hdr(#c5483c 0.5, #c5483c 0.75)", "border-inline-end-color: color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("aliceblue", "border-inline-end-color: aliceblue;"), v("antiquewhite", "border-inline-end-color: antiquewhite;"), v("aqua", "border-inline-end-color: aqua;"), v("aquamarine", "border-inline-end-color: aquamarine;"), v("azure", "border-inline-end-color: azure;"), v("beige", "border-inline-end-color: beige;"), v("bisque", "border-inline-end-color: bisque;"), v("black", "border-inline-end-color: black;"), v("blanchedalmond", "border-inline-end-color: blanchedalmond;"), v("blue", "border-inline-end-color: blue;"), v("blueviolet", "border-inline-end-color: blueviolet;"), v("brown", "border-inline-end-color: brown;"), v("burlywood", "border-inline-end-color: burlywood;"), v("cadetblue", "border-inline-end-color: cadetblue;"), v("chartreuse", "border-inline-end-color: chartreuse;"), v("chocolate", "border-inline-end-color: chocolate;"), v("coral", "border-inline-end-color: coral;"), v("cornflowerblue", "border-inline-end-color: cornflowerblue;"), v("cornsilk", "border-inline-end-color: cornsilk;"), v("crimson", "border-inline-end-color: crimson;"), v("cyan", "border-inline-end-color: cyan;"), v("darkblue", "border-inline-end-color: darkblue;"), v("darkcyan", "border-inline-end-color: darkcyan;"), v("darkgoldenrod", "border-inline-end-color: darkgoldenrod;"), v("darkgray", "border-inline-end-color: darkgray;"), v("darkgreen", "border-inline-end-color: darkgreen;"), v("darkgrey", "border-inline-end-color: darkgrey;"), ], }, { number: 231, name: "border-inline-end-style", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-inline-end-style\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the style of the logical inline end border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-top-style\"\u003e\u003ccode\u003eborder-top-style\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-right-style\"\u003e\u003ccode\u003eborder-right-style\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-bottom-style\"\u003e\u003ccode\u003eborder-bottom-style\u003c/code\u003e\u003c/a\u003e, or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-left-style\"\u003e\u003ccode\u003eborder-left-style\u003c/code\u003e\u003c/a\u003e property depending on the values defined for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LineStyleType", ebnf: "border-inline-end-style =\n LineStyleType", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: false, trueCount: 10, shown: 10, assists: [], values: [ v("solid", "border-inline-end-style: solid;"), v("none", "border-inline-end-style: none;"), v("hidden", "border-inline-end-style: hidden;"), v("dotted", "border-inline-end-style: dotted;"), v("dashed", "border-inline-end-style: dashed;"), v("double", "border-inline-end-style: double;"), v("groove", "border-inline-end-style: groove;"), v("ridge", "border-inline-end-style: ridge;"), v("inset", "border-inline-end-style: inset;"), v("outset", "border-inline-end-style: outset;"), ], }, { number: 232, name: "border-inline-end-width", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-inline-end-width\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the width of the logical inline-end border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-top-width\"\u003e\u003ccode\u003eborder-top-width\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-right-width\"\u003e\u003ccode\u003eborder-right-width\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-bottom-width\"\u003e\u003ccode\u003eborder-bottom-width\u003c/code\u003e\u003c/a\u003e, or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-left-width\"\u003e\u003ccode\u003eborder-left-width\u003c/code\u003e\u003c/a\u003e property depending on the values defined for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LineWidthType", ebnf: "border-inline-end-width =\n LineWidthType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 8, shown: 8, assists: [{ type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "border-inline-end-width: 24px;"), v("48px", "border-inline-end-width: 48px;"), v("8px", "border-inline-end-width: 8px;"), v("16px", "border-inline-end-width: 16px;"), v("64px", "border-inline-end-width: 64px;"), v("thin", "border-inline-end-width: thin;"), v("medium", "border-inline-end-width: medium;"), v("thick", "border-inline-end-width: thick;"), ], }, { number: 233, name: "border-inline-start", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-inline-start\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property is a \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e for setting the individual logical inline-start border property values in a single place in the style sheet.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "[ LineWidthType ] , [ LineStyleType ] , [ ColorType ]", ebnf: "border-inline-start =\n [ LineWidthType ] , [ LineStyleType ] , [ ColorType ]", valueType: "length", defaultValue: "24px solid #2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px solid #c5483c", "border-inline-start: 24px solid #c5483c;"), v("24px solid #2f5fd0", "border-inline-start: 24px solid #2f5fd0;"), v("24px solid rgb(50%, 80%, 30%, 0.75)", "border-inline-start: 24px solid rgb(50%, 80%, 30%, 0.75);"), v("24px solid rgb(1, 0.5, 2, 0.75)", "border-inline-start: 24px solid rgb(1, 0.5, 2, 0.75);"), v("24px solid rgb(from #c5483c 80% 65% 100%/ 2)", "border-inline-start: 24px solid rgb(from #c5483c 80% 65% 100%/ 2);"), v("24px solid rgba(50%, 80%, 30%, 0.75)", "border-inline-start: 24px solid rgba(50%, 80%, 30%, 0.75);"), v("24px solid rgba(1, 0.5, 2, 0.75)", "border-inline-start: 24px solid rgba(1, 0.5, 2, 0.75);"), v("24px solid rgba(from #c5483c 80% 65% 100%/ 2)", "border-inline-start: 24px solid rgba(from #c5483c 80% 65% 100%/ 2);"), v("24px solid hsl(45deg, 30%, 65%, 0.25)", "border-inline-start: 24px solid hsl(45deg, 30%, 65%, 0.25);"), v("24px solid hsl(from #c5483c 135deg 65% 100%/ 2)", "border-inline-start: 24px solid hsl(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid hsla(45deg, 30%, 65%, 0.25)", "border-inline-start: 24px solid hsla(45deg, 30%, 65%, 0.25);"), v("24px solid hsla(from #c5483c 135deg 65% 100%/ 2)", "border-inline-start: 24px solid hsla(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid hwb(from #c5483c 135deg 65% 100%/ 2)", "border-inline-start: 24px solid hwb(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid lab(from #c5483c 80% 15% 80%/ 1)", "border-inline-start: 24px solid lab(from #c5483c 80% 15% 80%/ 1);"), v("24px solid lch(from #c5483c 80% 15% 250deg/ 1)", "border-inline-start: 24px solid lch(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid oklab(from #c5483c 80% 15% 80%/ 1)", "border-inline-start: 24px solid oklab(from #c5483c 80% 15% 80%/ 1);"), v("24px solid oklch(from #c5483c 80% 15% 250deg/ 1)", "border-inline-start: 24px solid oklch(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid ictcp(from #c5483c 80% 15% 80%/ 1)", "border-inline-start: 24px solid ictcp(from #c5483c 80% 15% 80%/ 1);"), v("24px solid jzazbz(from #c5483c 80% 15% 80%/ 1)", "border-inline-start: 24px solid jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("24px solid jzczhz(from #c5483c 80% 15% 250deg/ 1)", "border-inline-start: 24px solid jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid alpha(from #c5483c/ 0.5)", "border-inline-start: 24px solid alpha(from #c5483c/ 0.5);"), v("24px solid color(from #c5483c --my-var 2/ 0.5)", "border-inline-start: 24px solid color(from #c5483c --my-var 2/ 0.5);"), v("24px solid color-hdr(#c5483c 0.5, #c5483c 0.75)", "border-inline-start: 24px solid color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("24px solid aliceblue", "border-inline-start: 24px solid aliceblue;"), v("24px solid antiquewhite", "border-inline-start: 24px solid antiquewhite;"), v("24px solid aqua", "border-inline-start: 24px solid aqua;"), v("24px solid aquamarine", "border-inline-start: 24px solid aquamarine;"), v("24px solid azure", "border-inline-start: 24px solid azure;"), v("24px solid beige", "border-inline-start: 24px solid beige;"), v("24px solid bisque", "border-inline-start: 24px solid bisque;"), v("24px solid black", "border-inline-start: 24px solid black;"), v("24px solid blanchedalmond", "border-inline-start: 24px solid blanchedalmond;"), v("24px solid blue", "border-inline-start: 24px solid blue;"), v("24px solid blueviolet", "border-inline-start: 24px solid blueviolet;"), v("24px solid brown", "border-inline-start: 24px solid brown;"), v("24px solid burlywood", "border-inline-start: 24px solid burlywood;"), v("24px solid cadetblue", "border-inline-start: 24px solid cadetblue;"), v("24px solid chartreuse", "border-inline-start: 24px solid chartreuse;"), v("24px solid chocolate", "border-inline-start: 24px solid chocolate;"), v("24px solid coral", "border-inline-start: 24px solid coral;"), v("24px solid cornflowerblue", "border-inline-start: 24px solid cornflowerblue;"), v("24px solid cornsilk", "border-inline-start: 24px solid cornsilk;"), v("24px solid crimson", "border-inline-start: 24px solid crimson;"), v("24px solid cyan", "border-inline-start: 24px solid cyan;"), v("24px solid darkblue", "border-inline-start: 24px solid darkblue;"), v("24px solid darkcyan", "border-inline-start: 24px solid darkcyan;"), v("24px solid darkgoldenrod", "border-inline-start: 24px solid darkgoldenrod;"), v("24px solid darkgray", "border-inline-start: 24px solid darkgray;"), v("24px solid darkgreen", "border-inline-start: 24px solid darkgreen;"), v("24px solid darkgrey", "border-inline-start: 24px solid darkgrey;"), ], }, { number: 234, name: "border-inline-start-color", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-inline-start-color\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the color of the logical inline start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-top-color\"\u003e\u003ccode\u003eborder-top-color\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-right-color\"\u003e\u003ccode\u003eborder-right-color\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-bottom-color\"\u003e\u003ccode\u003eborder-bottom-color\u003c/code\u003e\u003c/a\u003e, or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-left-color\"\u003e\u003ccode\u003eborder-left-color\u003c/code\u003e\u003c/a\u003e property depending on the values defined for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ColorType | Image1dType", ebnf: "border-inline-start-color =\n ColorType | Image1dType", valueType: "keyword", defaultValue: "#2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 161, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003cflex\u003e", samples: ["1fr", "2fr", "3fr"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("#c5483c", "border-inline-start-color: #c5483c;"), v("#2f5fd0", "border-inline-start-color: #2f5fd0;"), v("rgb(50%, 80%, 30%, 0.75)", "border-inline-start-color: rgb(50%, 80%, 30%, 0.75);"), v("rgb(1, 0.5, 2, 0.75)", "border-inline-start-color: rgb(1, 0.5, 2, 0.75);"), v("rgb(from #c5483c 80% 65% 100%/ 2)", "border-inline-start-color: rgb(from #c5483c 80% 65% 100%/ 2);"), v("rgba(50%, 80%, 30%, 0.75)", "border-inline-start-color: rgba(50%, 80%, 30%, 0.75);"), v("rgba(1, 0.5, 2, 0.75)", "border-inline-start-color: rgba(1, 0.5, 2, 0.75);"), v("rgba(from #c5483c 80% 65% 100%/ 2)", "border-inline-start-color: rgba(from #c5483c 80% 65% 100%/ 2);"), v("hsl(45deg, 30%, 65%, 0.25)", "border-inline-start-color: hsl(45deg, 30%, 65%, 0.25);"), v("hsl(from #c5483c 135deg 65% 100%/ 2)", "border-inline-start-color: hsl(from #c5483c 135deg 65% 100%/ 2);"), v("hsla(45deg, 30%, 65%, 0.25)", "border-inline-start-color: hsla(45deg, 30%, 65%, 0.25);"), v("hsla(from #c5483c 135deg 65% 100%/ 2)", "border-inline-start-color: hsla(from #c5483c 135deg 65% 100%/ 2);"), v("hwb(from #c5483c 135deg 65% 100%/ 2)", "border-inline-start-color: hwb(from #c5483c 135deg 65% 100%/ 2);"), v("lab(from #c5483c 80% 15% 80%/ 1)", "border-inline-start-color: lab(from #c5483c 80% 15% 80%/ 1);"), v("lch(from #c5483c 80% 15% 250deg/ 1)", "border-inline-start-color: lch(from #c5483c 80% 15% 250deg/ 1);"), v("oklab(from #c5483c 80% 15% 80%/ 1)", "border-inline-start-color: oklab(from #c5483c 80% 15% 80%/ 1);"), v("oklch(from #c5483c 80% 15% 250deg/ 1)", "border-inline-start-color: oklch(from #c5483c 80% 15% 250deg/ 1);"), v("ictcp(from #c5483c 80% 15% 80%/ 1)", "border-inline-start-color: ictcp(from #c5483c 80% 15% 80%/ 1);"), v("jzazbz(from #c5483c 80% 15% 80%/ 1)", "border-inline-start-color: jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("jzczhz(from #c5483c 80% 15% 250deg/ 1)", "border-inline-start-color: jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("alpha(from #c5483c/ 0.5)", "border-inline-start-color: alpha(from #c5483c/ 0.5);"), v("color(from #c5483c --my-var 2/ 0.5)", "border-inline-start-color: color(from #c5483c --my-var 2/ 0.5);"), v("color-hdr(#c5483c 0.5, #c5483c 0.75)", "border-inline-start-color: color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("aliceblue", "border-inline-start-color: aliceblue;"), v("antiquewhite", "border-inline-start-color: antiquewhite;"), v("aqua", "border-inline-start-color: aqua;"), v("aquamarine", "border-inline-start-color: aquamarine;"), v("azure", "border-inline-start-color: azure;"), v("beige", "border-inline-start-color: beige;"), v("bisque", "border-inline-start-color: bisque;"), v("black", "border-inline-start-color: black;"), v("blanchedalmond", "border-inline-start-color: blanchedalmond;"), v("blue", "border-inline-start-color: blue;"), v("blueviolet", "border-inline-start-color: blueviolet;"), v("brown", "border-inline-start-color: brown;"), v("burlywood", "border-inline-start-color: burlywood;"), v("cadetblue", "border-inline-start-color: cadetblue;"), v("chartreuse", "border-inline-start-color: chartreuse;"), v("chocolate", "border-inline-start-color: chocolate;"), v("coral", "border-inline-start-color: coral;"), v("cornflowerblue", "border-inline-start-color: cornflowerblue;"), v("cornsilk", "border-inline-start-color: cornsilk;"), v("crimson", "border-inline-start-color: crimson;"), v("cyan", "border-inline-start-color: cyan;"), v("darkblue", "border-inline-start-color: darkblue;"), v("darkcyan", "border-inline-start-color: darkcyan;"), v("darkgoldenrod", "border-inline-start-color: darkgoldenrod;"), v("darkgray", "border-inline-start-color: darkgray;"), v("darkgreen", "border-inline-start-color: darkgreen;"), v("darkgrey", "border-inline-start-color: darkgrey;"), ], }, { number: 235, name: "border-inline-start-style", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-inline-start-style\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the style of the logical inline start border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-top-style\"\u003e\u003ccode\u003eborder-top-style\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-right-style\"\u003e\u003ccode\u003eborder-right-style\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-bottom-style\"\u003e\u003ccode\u003eborder-bottom-style\u003c/code\u003e\u003c/a\u003e, or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-left-style\"\u003e\u003ccode\u003eborder-left-style\u003c/code\u003e\u003c/a\u003e property depending on the values defined for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LineStyleType", ebnf: "border-inline-start-style =\n LineStyleType", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: false, trueCount: 10, shown: 10, assists: [], values: [ v("solid", "border-inline-start-style: solid;"), v("none", "border-inline-start-style: none;"), v("hidden", "border-inline-start-style: hidden;"), v("dotted", "border-inline-start-style: dotted;"), v("dashed", "border-inline-start-style: dashed;"), v("double", "border-inline-start-style: double;"), v("groove", "border-inline-start-style: groove;"), v("ridge", "border-inline-start-style: ridge;"), v("inset", "border-inline-start-style: inset;"), v("outset", "border-inline-start-style: outset;"), ], }, { number: 236, name: "border-inline-start-width", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-inline-start-width\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the width of the logical inline-start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-top-width\"\u003e\u003ccode\u003eborder-top-width\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-right-width\"\u003e\u003ccode\u003eborder-right-width\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-bottom-width\"\u003e\u003ccode\u003eborder-bottom-width\u003c/code\u003e\u003c/a\u003e, or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-left-width\"\u003e\u003ccode\u003eborder-left-width\u003c/code\u003e\u003c/a\u003e property depending on the values defined for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LineWidthType", ebnf: "border-inline-start-width =\n LineWidthType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 8, shown: 8, assists: [{ type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "border-inline-start-width: 24px;"), v("48px", "border-inline-start-width: 48px;"), v("8px", "border-inline-start-width: 8px;"), v("16px", "border-inline-start-width: 16px;"), v("64px", "border-inline-start-width: 64px;"), v("thin", "border-inline-start-width: thin;"), v("medium", "border-inline-start-width: medium;"), v("thick", "border-inline-start-width: thick;"), ], }, { number: 237, name: "border-inline-style", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-inline-style\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the style of the logical inline borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-top-style\"\u003e\u003ccode\u003eborder-top-style\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-bottom-style\"\u003e\u003ccode\u003eborder-bottom-style\u003c/code\u003e\u003c/a\u003e, or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-left-style\"\u003e\u003ccode\u003eborder-left-style\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-right-style\"\u003e\u003ccode\u003eborder-right-style\u003c/code\u003e\u003c/a\u003e properties depending on the values defined for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BorderTopStyleProp , [ BorderTopStyleProp ]", ebnf: "border-inline-style =\n BorderTopStyleProp , [ BorderTopStyleProp ]", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: false, trueCount: 10, shown: 10, assists: [], values: [ v("solid", "border-inline-style: solid;"), v("none", "border-inline-style: none;"), v("hidden", "border-inline-style: hidden;"), v("dotted", "border-inline-style: dotted;"), v("dashed", "border-inline-style: dashed;"), v("double", "border-inline-style: double;"), v("groove", "border-inline-style: groove;"), v("ridge", "border-inline-style: ridge;"), v("inset", "border-inline-style: inset;"), v("outset", "border-inline-style: outset;"), ], }, { number: 238, name: "border-inline-width", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-inline-width\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the width of the logical inline borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-top-width\"\u003e\u003ccode\u003eborder-top-width\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-bottom-width\"\u003e\u003ccode\u003eborder-bottom-width\u003c/code\u003e\u003c/a\u003e, or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-left-width\"\u003e\u003ccode\u003eborder-left-width\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-right-width\"\u003e\u003ccode\u003eborder-right-width\u003c/code\u003e\u003c/a\u003e property depending on the values defined for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BorderTopWidthProp , [ BorderTopWidthProp ]", ebnf: "border-inline-width =\n BorderTopWidthProp , [ BorderTopWidthProp ]", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 8, shown: 8, assists: [{ type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "border-inline-width: 24px;"), v("48px", "border-inline-width: 48px;"), v("8px", "border-inline-width: 8px;"), v("16px", "border-inline-width: 16px;"), v("64px", "border-inline-width: 64px;"), v("thin", "border-inline-width: thin;"), v("medium", "border-inline-width: medium;"), v("thick", "border-inline-width: thick;"), ], }, { number: 239, name: "border-left", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-left\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets all the properties of an element's left \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border\"\u003eborder\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "[ LineWidthType ] , [ LineStyleType ] , [ ColorType ]", ebnf: "border-left =\n [ LineWidthType ] , [ LineStyleType ] , [ ColorType ]", valueType: "length", defaultValue: "24px solid #2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px solid #c5483c", "border-left: 24px solid #c5483c;"), v("24px solid #2f5fd0", "border-left: 24px solid #2f5fd0;"), v("24px solid rgb(50%, 80%, 30%, 0.75)", "border-left: 24px solid rgb(50%, 80%, 30%, 0.75);"), v("24px solid rgb(1, 0.5, 2, 0.75)", "border-left: 24px solid rgb(1, 0.5, 2, 0.75);"), v("24px solid rgb(from #c5483c 80% 65% 100%/ 2)", "border-left: 24px solid rgb(from #c5483c 80% 65% 100%/ 2);"), v("24px solid rgba(50%, 80%, 30%, 0.75)", "border-left: 24px solid rgba(50%, 80%, 30%, 0.75);"), v("24px solid rgba(1, 0.5, 2, 0.75)", "border-left: 24px solid rgba(1, 0.5, 2, 0.75);"), v("24px solid rgba(from #c5483c 80% 65% 100%/ 2)", "border-left: 24px solid rgba(from #c5483c 80% 65% 100%/ 2);"), v("24px solid hsl(45deg, 30%, 65%, 0.25)", "border-left: 24px solid hsl(45deg, 30%, 65%, 0.25);"), v("24px solid hsl(from #c5483c 135deg 65% 100%/ 2)", "border-left: 24px solid hsl(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid hsla(45deg, 30%, 65%, 0.25)", "border-left: 24px solid hsla(45deg, 30%, 65%, 0.25);"), v("24px solid hsla(from #c5483c 135deg 65% 100%/ 2)", "border-left: 24px solid hsla(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid hwb(from #c5483c 135deg 65% 100%/ 2)", "border-left: 24px solid hwb(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid lab(from #c5483c 80% 15% 80%/ 1)", "border-left: 24px solid lab(from #c5483c 80% 15% 80%/ 1);"), v("24px solid lch(from #c5483c 80% 15% 250deg/ 1)", "border-left: 24px solid lch(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid oklab(from #c5483c 80% 15% 80%/ 1)", "border-left: 24px solid oklab(from #c5483c 80% 15% 80%/ 1);"), v("24px solid oklch(from #c5483c 80% 15% 250deg/ 1)", "border-left: 24px solid oklch(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid ictcp(from #c5483c 80% 15% 80%/ 1)", "border-left: 24px solid ictcp(from #c5483c 80% 15% 80%/ 1);"), v("24px solid jzazbz(from #c5483c 80% 15% 80%/ 1)", "border-left: 24px solid jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("24px solid jzczhz(from #c5483c 80% 15% 250deg/ 1)", "border-left: 24px solid jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid alpha(from #c5483c/ 0.5)", "border-left: 24px solid alpha(from #c5483c/ 0.5);"), v("24px solid color(from #c5483c --my-var 2/ 0.5)", "border-left: 24px solid color(from #c5483c --my-var 2/ 0.5);"), v("24px solid color-hdr(#c5483c 0.5, #c5483c 0.75)", "border-left: 24px solid color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("24px solid aliceblue", "border-left: 24px solid aliceblue;"), v("24px solid antiquewhite", "border-left: 24px solid antiquewhite;"), v("24px solid aqua", "border-left: 24px solid aqua;"), v("24px solid aquamarine", "border-left: 24px solid aquamarine;"), v("24px solid azure", "border-left: 24px solid azure;"), v("24px solid beige", "border-left: 24px solid beige;"), v("24px solid bisque", "border-left: 24px solid bisque;"), v("24px solid black", "border-left: 24px solid black;"), v("24px solid blanchedalmond", "border-left: 24px solid blanchedalmond;"), v("24px solid blue", "border-left: 24px solid blue;"), v("24px solid blueviolet", "border-left: 24px solid blueviolet;"), v("24px solid brown", "border-left: 24px solid brown;"), v("24px solid burlywood", "border-left: 24px solid burlywood;"), v("24px solid cadetblue", "border-left: 24px solid cadetblue;"), v("24px solid chartreuse", "border-left: 24px solid chartreuse;"), v("24px solid chocolate", "border-left: 24px solid chocolate;"), v("24px solid coral", "border-left: 24px solid coral;"), v("24px solid cornflowerblue", "border-left: 24px solid cornflowerblue;"), v("24px solid cornsilk", "border-left: 24px solid cornsilk;"), v("24px solid crimson", "border-left: 24px solid crimson;"), v("24px solid cyan", "border-left: 24px solid cyan;"), v("24px solid darkblue", "border-left: 24px solid darkblue;"), v("24px solid darkcyan", "border-left: 24px solid darkcyan;"), v("24px solid darkgoldenrod", "border-left: 24px solid darkgoldenrod;"), v("24px solid darkgray", "border-left: 24px solid darkgray;"), v("24px solid darkgreen", "border-left: 24px solid darkgreen;"), v("24px solid darkgrey", "border-left: 24px solid darkgrey;"), ], }, { number: 240, name: "border-left-color", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-left-color\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the color of an element's left \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border\"\u003eborder\u003c/a\u003e. It can also be set with the shorthand CSS properties \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-color\"\u003e\u003ccode\u003eborder-color\u003c/code\u003e\u003c/a\u003e or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-left\"\u003e\u003ccode\u003eborder-left\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ColorType | Image1dType", ebnf: "border-left-color =\n ColorType | Image1dType", valueType: "keyword", defaultValue: "#2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 161, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003cflex\u003e", samples: ["1fr", "2fr", "3fr"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("#c5483c", "border-left-color: #c5483c;"), v("#2f5fd0", "border-left-color: #2f5fd0;"), v("rgb(50%, 80%, 30%, 0.75)", "border-left-color: rgb(50%, 80%, 30%, 0.75);"), v("rgb(1, 0.5, 2, 0.75)", "border-left-color: rgb(1, 0.5, 2, 0.75);"), v("rgb(from #c5483c 80% 65% 100%/ 2)", "border-left-color: rgb(from #c5483c 80% 65% 100%/ 2);"), v("rgba(50%, 80%, 30%, 0.75)", "border-left-color: rgba(50%, 80%, 30%, 0.75);"), v("rgba(1, 0.5, 2, 0.75)", "border-left-color: rgba(1, 0.5, 2, 0.75);"), v("rgba(from #c5483c 80% 65% 100%/ 2)", "border-left-color: rgba(from #c5483c 80% 65% 100%/ 2);"), v("hsl(45deg, 30%, 65%, 0.25)", "border-left-color: hsl(45deg, 30%, 65%, 0.25);"), v("hsl(from #c5483c 135deg 65% 100%/ 2)", "border-left-color: hsl(from #c5483c 135deg 65% 100%/ 2);"), v("hsla(45deg, 30%, 65%, 0.25)", "border-left-color: hsla(45deg, 30%, 65%, 0.25);"), v("hsla(from #c5483c 135deg 65% 100%/ 2)", "border-left-color: hsla(from #c5483c 135deg 65% 100%/ 2);"), v("hwb(from #c5483c 135deg 65% 100%/ 2)", "border-left-color: hwb(from #c5483c 135deg 65% 100%/ 2);"), v("lab(from #c5483c 80% 15% 80%/ 1)", "border-left-color: lab(from #c5483c 80% 15% 80%/ 1);"), v("lch(from #c5483c 80% 15% 250deg/ 1)", "border-left-color: lch(from #c5483c 80% 15% 250deg/ 1);"), v("oklab(from #c5483c 80% 15% 80%/ 1)", "border-left-color: oklab(from #c5483c 80% 15% 80%/ 1);"), v("oklch(from #c5483c 80% 15% 250deg/ 1)", "border-left-color: oklch(from #c5483c 80% 15% 250deg/ 1);"), v("ictcp(from #c5483c 80% 15% 80%/ 1)", "border-left-color: ictcp(from #c5483c 80% 15% 80%/ 1);"), v("jzazbz(from #c5483c 80% 15% 80%/ 1)", "border-left-color: jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("jzczhz(from #c5483c 80% 15% 250deg/ 1)", "border-left-color: jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("alpha(from #c5483c/ 0.5)", "border-left-color: alpha(from #c5483c/ 0.5);"), v("color(from #c5483c --my-var 2/ 0.5)", "border-left-color: color(from #c5483c --my-var 2/ 0.5);"), v("color-hdr(#c5483c 0.5, #c5483c 0.75)", "border-left-color: color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("aliceblue", "border-left-color: aliceblue;"), v("antiquewhite", "border-left-color: antiquewhite;"), v("aqua", "border-left-color: aqua;"), v("aquamarine", "border-left-color: aquamarine;"), v("azure", "border-left-color: azure;"), v("beige", "border-left-color: beige;"), v("bisque", "border-left-color: bisque;"), v("black", "border-left-color: black;"), v("blanchedalmond", "border-left-color: blanchedalmond;"), v("blue", "border-left-color: blue;"), v("blueviolet", "border-left-color: blueviolet;"), v("brown", "border-left-color: brown;"), v("burlywood", "border-left-color: burlywood;"), v("cadetblue", "border-left-color: cadetblue;"), v("chartreuse", "border-left-color: chartreuse;"), v("chocolate", "border-left-color: chocolate;"), v("coral", "border-left-color: coral;"), v("cornflowerblue", "border-left-color: cornflowerblue;"), v("cornsilk", "border-left-color: cornsilk;"), v("crimson", "border-left-color: crimson;"), v("cyan", "border-left-color: cyan;"), v("darkblue", "border-left-color: darkblue;"), v("darkcyan", "border-left-color: darkcyan;"), v("darkgoldenrod", "border-left-color: darkgoldenrod;"), v("darkgray", "border-left-color: darkgray;"), v("darkgreen", "border-left-color: darkgreen;"), v("darkgrey", "border-left-color: darkgrey;"), ], }, { number: 241, name: "border-left-style", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-left-style\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the line style of an element's left \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border\"\u003e\u003ccode\u003eborder\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LineStyleType", ebnf: "border-left-style =\n LineStyleType", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: false, trueCount: 10, shown: 10, assists: [], values: [ v("solid", "border-left-style: solid;"), v("none", "border-left-style: none;"), v("hidden", "border-left-style: hidden;"), v("dotted", "border-left-style: dotted;"), v("dashed", "border-left-style: dashed;"), v("double", "border-left-style: double;"), v("groove", "border-left-style: groove;"), v("ridge", "border-left-style: ridge;"), v("inset", "border-left-style: inset;"), v("outset", "border-left-style: outset;"), ], }, { number: 242, name: "border-left-width", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-left-width\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the width of the left border of an element.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LineWidthType", ebnf: "border-left-width =\n LineWidthType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 8, shown: 8, assists: [{ type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "border-left-width: 24px;"), v("48px", "border-left-width: 48px;"), v("8px", "border-left-width: 8px;"), v("16px", "border-left-width: 16px;"), v("64px", "border-left-width: 64px;"), v("thin", "border-left-width: thin;"), v("medium", "border-left-width: medium;"), v("thick", "border-left-width: thick;"), ], }, { number: 243, name: "border-radius", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-radius\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BorderRadiusList", ebnf: "border-radius =\n BorderRadiusList", valueType: "length", defaultValue: "12px 36px 24px 8px", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "BorderRadiusList", samples: ["24px", "12px 36px 24px 8px", "40% 20%", "30px 10px 30px 10px / 10px 30px", "16px 8px 24px"] }], values: [ v("24px", "border-radius: 24px;"), v("12px 36px 24px 8px", "border-radius: 12px 36px 24px 8px;"), v("40% 20%", "border-radius: 40% 20%;"), v("30px 10px 30px 10px/ 10px 30px", "border-radius: 30px 10px 30px 10px/ 10px 30px;"), v("16px 8px 24px", "border-radius: 16px 8px 24px;"), ], }, { number: 244, name: "border-right", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-right\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets all the properties of an element's right \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border\"\u003eborder\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "[ LineWidthType ] , [ LineStyleType ] , [ ColorType ]", ebnf: "border-right =\n [ LineWidthType ] , [ LineStyleType ] , [ ColorType ]", valueType: "length", defaultValue: "24px solid #2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px solid #c5483c", "border-right: 24px solid #c5483c;"), v("24px solid #2f5fd0", "border-right: 24px solid #2f5fd0;"), v("24px solid rgb(50%, 80%, 30%, 0.75)", "border-right: 24px solid rgb(50%, 80%, 30%, 0.75);"), v("24px solid rgb(1, 0.5, 2, 0.75)", "border-right: 24px solid rgb(1, 0.5, 2, 0.75);"), v("24px solid rgb(from #c5483c 80% 65% 100%/ 2)", "border-right: 24px solid rgb(from #c5483c 80% 65% 100%/ 2);"), v("24px solid rgba(50%, 80%, 30%, 0.75)", "border-right: 24px solid rgba(50%, 80%, 30%, 0.75);"), v("24px solid rgba(1, 0.5, 2, 0.75)", "border-right: 24px solid rgba(1, 0.5, 2, 0.75);"), v("24px solid rgba(from #c5483c 80% 65% 100%/ 2)", "border-right: 24px solid rgba(from #c5483c 80% 65% 100%/ 2);"), v("24px solid hsl(45deg, 30%, 65%, 0.25)", "border-right: 24px solid hsl(45deg, 30%, 65%, 0.25);"), v("24px solid hsl(from #c5483c 135deg 65% 100%/ 2)", "border-right: 24px solid hsl(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid hsla(45deg, 30%, 65%, 0.25)", "border-right: 24px solid hsla(45deg, 30%, 65%, 0.25);"), v("24px solid hsla(from #c5483c 135deg 65% 100%/ 2)", "border-right: 24px solid hsla(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid hwb(from #c5483c 135deg 65% 100%/ 2)", "border-right: 24px solid hwb(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid lab(from #c5483c 80% 15% 80%/ 1)", "border-right: 24px solid lab(from #c5483c 80% 15% 80%/ 1);"), v("24px solid lch(from #c5483c 80% 15% 250deg/ 1)", "border-right: 24px solid lch(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid oklab(from #c5483c 80% 15% 80%/ 1)", "border-right: 24px solid oklab(from #c5483c 80% 15% 80%/ 1);"), v("24px solid oklch(from #c5483c 80% 15% 250deg/ 1)", "border-right: 24px solid oklch(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid ictcp(from #c5483c 80% 15% 80%/ 1)", "border-right: 24px solid ictcp(from #c5483c 80% 15% 80%/ 1);"), v("24px solid jzazbz(from #c5483c 80% 15% 80%/ 1)", "border-right: 24px solid jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("24px solid jzczhz(from #c5483c 80% 15% 250deg/ 1)", "border-right: 24px solid jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid alpha(from #c5483c/ 0.5)", "border-right: 24px solid alpha(from #c5483c/ 0.5);"), v("24px solid color(from #c5483c --my-var 2/ 0.5)", "border-right: 24px solid color(from #c5483c --my-var 2/ 0.5);"), v("24px solid color-hdr(#c5483c 0.5, #c5483c 0.75)", "border-right: 24px solid color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("24px solid aliceblue", "border-right: 24px solid aliceblue;"), v("24px solid antiquewhite", "border-right: 24px solid antiquewhite;"), v("24px solid aqua", "border-right: 24px solid aqua;"), v("24px solid aquamarine", "border-right: 24px solid aquamarine;"), v("24px solid azure", "border-right: 24px solid azure;"), v("24px solid beige", "border-right: 24px solid beige;"), v("24px solid bisque", "border-right: 24px solid bisque;"), v("24px solid black", "border-right: 24px solid black;"), v("24px solid blanchedalmond", "border-right: 24px solid blanchedalmond;"), v("24px solid blue", "border-right: 24px solid blue;"), v("24px solid blueviolet", "border-right: 24px solid blueviolet;"), v("24px solid brown", "border-right: 24px solid brown;"), v("24px solid burlywood", "border-right: 24px solid burlywood;"), v("24px solid cadetblue", "border-right: 24px solid cadetblue;"), v("24px solid chartreuse", "border-right: 24px solid chartreuse;"), v("24px solid chocolate", "border-right: 24px solid chocolate;"), v("24px solid coral", "border-right: 24px solid coral;"), v("24px solid cornflowerblue", "border-right: 24px solid cornflowerblue;"), v("24px solid cornsilk", "border-right: 24px solid cornsilk;"), v("24px solid crimson", "border-right: 24px solid crimson;"), v("24px solid cyan", "border-right: 24px solid cyan;"), v("24px solid darkblue", "border-right: 24px solid darkblue;"), v("24px solid darkcyan", "border-right: 24px solid darkcyan;"), v("24px solid darkgoldenrod", "border-right: 24px solid darkgoldenrod;"), v("24px solid darkgray", "border-right: 24px solid darkgray;"), v("24px solid darkgreen", "border-right: 24px solid darkgreen;"), v("24px solid darkgrey", "border-right: 24px solid darkgrey;"), ], }, { number: 245, name: "border-right-color", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-right-color\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the color of an element's right \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border\"\u003eborder\u003c/a\u003e. It can also be set with the shorthand CSS properties \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-color\"\u003e\u003ccode\u003eborder-color\u003c/code\u003e\u003c/a\u003e or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-right\"\u003e\u003ccode\u003eborder-right\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ColorType | Image1dType", ebnf: "border-right-color =\n ColorType | Image1dType", valueType: "keyword", defaultValue: "#2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 161, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003cflex\u003e", samples: ["1fr", "2fr", "3fr"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("#c5483c", "border-right-color: #c5483c;"), v("#2f5fd0", "border-right-color: #2f5fd0;"), v("rgb(50%, 80%, 30%, 0.75)", "border-right-color: rgb(50%, 80%, 30%, 0.75);"), v("rgb(1, 0.5, 2, 0.75)", "border-right-color: rgb(1, 0.5, 2, 0.75);"), v("rgb(from #c5483c 80% 65% 100%/ 2)", "border-right-color: rgb(from #c5483c 80% 65% 100%/ 2);"), v("rgba(50%, 80%, 30%, 0.75)", "border-right-color: rgba(50%, 80%, 30%, 0.75);"), v("rgba(1, 0.5, 2, 0.75)", "border-right-color: rgba(1, 0.5, 2, 0.75);"), v("rgba(from #c5483c 80% 65% 100%/ 2)", "border-right-color: rgba(from #c5483c 80% 65% 100%/ 2);"), v("hsl(45deg, 30%, 65%, 0.25)", "border-right-color: hsl(45deg, 30%, 65%, 0.25);"), v("hsl(from #c5483c 135deg 65% 100%/ 2)", "border-right-color: hsl(from #c5483c 135deg 65% 100%/ 2);"), v("hsla(45deg, 30%, 65%, 0.25)", "border-right-color: hsla(45deg, 30%, 65%, 0.25);"), v("hsla(from #c5483c 135deg 65% 100%/ 2)", "border-right-color: hsla(from #c5483c 135deg 65% 100%/ 2);"), v("hwb(from #c5483c 135deg 65% 100%/ 2)", "border-right-color: hwb(from #c5483c 135deg 65% 100%/ 2);"), v("lab(from #c5483c 80% 15% 80%/ 1)", "border-right-color: lab(from #c5483c 80% 15% 80%/ 1);"), v("lch(from #c5483c 80% 15% 250deg/ 1)", "border-right-color: lch(from #c5483c 80% 15% 250deg/ 1);"), v("oklab(from #c5483c 80% 15% 80%/ 1)", "border-right-color: oklab(from #c5483c 80% 15% 80%/ 1);"), v("oklch(from #c5483c 80% 15% 250deg/ 1)", "border-right-color: oklch(from #c5483c 80% 15% 250deg/ 1);"), v("ictcp(from #c5483c 80% 15% 80%/ 1)", "border-right-color: ictcp(from #c5483c 80% 15% 80%/ 1);"), v("jzazbz(from #c5483c 80% 15% 80%/ 1)", "border-right-color: jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("jzczhz(from #c5483c 80% 15% 250deg/ 1)", "border-right-color: jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("alpha(from #c5483c/ 0.5)", "border-right-color: alpha(from #c5483c/ 0.5);"), v("color(from #c5483c --my-var 2/ 0.5)", "border-right-color: color(from #c5483c --my-var 2/ 0.5);"), v("color-hdr(#c5483c 0.5, #c5483c 0.75)", "border-right-color: color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("aliceblue", "border-right-color: aliceblue;"), v("antiquewhite", "border-right-color: antiquewhite;"), v("aqua", "border-right-color: aqua;"), v("aquamarine", "border-right-color: aquamarine;"), v("azure", "border-right-color: azure;"), v("beige", "border-right-color: beige;"), v("bisque", "border-right-color: bisque;"), v("black", "border-right-color: black;"), v("blanchedalmond", "border-right-color: blanchedalmond;"), v("blue", "border-right-color: blue;"), v("blueviolet", "border-right-color: blueviolet;"), v("brown", "border-right-color: brown;"), v("burlywood", "border-right-color: burlywood;"), v("cadetblue", "border-right-color: cadetblue;"), v("chartreuse", "border-right-color: chartreuse;"), v("chocolate", "border-right-color: chocolate;"), v("coral", "border-right-color: coral;"), v("cornflowerblue", "border-right-color: cornflowerblue;"), v("cornsilk", "border-right-color: cornsilk;"), v("crimson", "border-right-color: crimson;"), v("cyan", "border-right-color: cyan;"), v("darkblue", "border-right-color: darkblue;"), v("darkcyan", "border-right-color: darkcyan;"), v("darkgoldenrod", "border-right-color: darkgoldenrod;"), v("darkgray", "border-right-color: darkgray;"), v("darkgreen", "border-right-color: darkgreen;"), v("darkgrey", "border-right-color: darkgrey;"), ], }, { number: 246, name: "border-right-style", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-right-style\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the line style of an element's right \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border\"\u003e\u003ccode\u003eborder\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LineStyleType", ebnf: "border-right-style =\n LineStyleType", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: false, trueCount: 10, shown: 10, assists: [], values: [ v("solid", "border-right-style: solid;"), v("none", "border-right-style: none;"), v("hidden", "border-right-style: hidden;"), v("dotted", "border-right-style: dotted;"), v("dashed", "border-right-style: dashed;"), v("double", "border-right-style: double;"), v("groove", "border-right-style: groove;"), v("ridge", "border-right-style: ridge;"), v("inset", "border-right-style: inset;"), v("outset", "border-right-style: outset;"), ], }, { number: 247, name: "border-right-width", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-right-width\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the width of the right border of an element.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LineWidthType", ebnf: "border-right-width =\n LineWidthType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 8, shown: 8, assists: [{ type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "border-right-width: 24px;"), v("48px", "border-right-width: 48px;"), v("8px", "border-right-width: 8px;"), v("16px", "border-right-width: 16px;"), v("64px", "border-right-width: 64px;"), v("thin", "border-right-width: thin;"), v("medium", "border-right-width: medium;"), v("thick", "border-right-width: thick;"), ], }, { number: 248, name: "border-spacing", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-spacing\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the distance between the borders of adjacent cells in a \u003ca href=\"/en-US/docs/Web/HTML/Reference/Elements/table\"\u003e\u003ccode\u003e\u0026lt;table\u0026gt;\u003c/code\u003e\u003c/a\u003e. This property applies only when \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-collapse\"\u003e\u003ccode\u003eborder-collapse\u003c/code\u003e\u003c/a\u003e is \u003ccode\u003eseparate\u003c/code\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "NonNegativeLengthType , [ NonNegativeLengthType ]", ebnf: "border-spacing =\n NonNegativeLengthType , [ NonNegativeLengthType ]", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "border-spacing: 24px;"), v("48px", "border-spacing: 48px;"), v("8px", "border-spacing: 8px;"), v("16px", "border-spacing: 16px;"), v("64px", "border-spacing: 64px;"), ], }, { number: 249, name: "border-start-end-radius", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-start-end-radius\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines a logical border radius on an element, which maps to a physical border radius depending on the element's \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e. This is useful when building styles to work regardless of the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003etext orientation\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Guides/Writing_modes\"\u003ewriting mode\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "NonNegativeLengthPercentageType , [ NonNegativeLengthPercentageType ]", ebnf: "border-start-end-radius =\n NonNegativeLengthPercentageType , [ NonNegativeLengthPercentageType ]", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 18, shown: 18, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "border-start-end-radius: 24px;"), v("48px", "border-start-end-radius: 48px;"), v("8px", "border-start-end-radius: 8px;"), v("16px", "border-start-end-radius: 16px;"), v("64px", "border-start-end-radius: 64px;"), v("50%", "border-start-end-radius: 50%;"), v("80%", "border-start-end-radius: 80%;"), v("30%", "border-start-end-radius: 30%;"), v("65%", "border-start-end-radius: 65%;"), v("15%", "border-start-end-radius: 15%;"), v("100%", "border-start-end-radius: 100%;"), v("calc(24px)", "border-start-end-radius: calc(24px);"), v("clamp(24px, 2em, 48px)", "border-start-end-radius: clamp(24px, 2em, 48px);"), v("min(24px)", "border-start-end-radius: min(24px);"), v("max(24px)", "border-start-end-radius: max(24px);"), v("round(nearest, 24px, 2em)", "border-start-end-radius: round(nearest, 24px, 2em);"), v("abs(24px)", "border-start-end-radius: abs(24px);"), v("env(my-ident, 48px)", "border-start-end-radius: env(my-ident, 48px);"), ], }, { number: 250, name: "border-start-start-radius", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-start-start-radius\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003e\u003ccode\u003etext-orientation\u003c/code\u003e\u003c/a\u003e. This is useful when building styles to work regardless of the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/text-orientation\"\u003etext orientation\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Guides/Writing_modes\"\u003ewriting mode\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "NonNegativeLengthPercentageType , [ NonNegativeLengthPercentageType ]", ebnf: "border-start-start-radius =\n NonNegativeLengthPercentageType , [ NonNegativeLengthPercentageType ]", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 18, shown: 18, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "border-start-start-radius: 24px;"), v("48px", "border-start-start-radius: 48px;"), v("8px", "border-start-start-radius: 8px;"), v("16px", "border-start-start-radius: 16px;"), v("64px", "border-start-start-radius: 64px;"), v("50%", "border-start-start-radius: 50%;"), v("80%", "border-start-start-radius: 80%;"), v("30%", "border-start-start-radius: 30%;"), v("65%", "border-start-start-radius: 65%;"), v("15%", "border-start-start-radius: 15%;"), v("100%", "border-start-start-radius: 100%;"), v("calc(24px)", "border-start-start-radius: calc(24px);"), v("clamp(24px, 2em, 48px)", "border-start-start-radius: clamp(24px, 2em, 48px);"), v("min(24px)", "border-start-start-radius: min(24px);"), v("max(24px)", "border-start-start-radius: max(24px);"), v("round(nearest, 24px, 2em)", "border-start-start-radius: round(nearest, 24px, 2em);"), v("abs(24px)", "border-start-start-radius: abs(24px);"), v("env(my-ident, 48px)", "border-start-start-radius: env(my-ident, 48px);"), ], }, { number: 251, name: "border-style", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-style\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the line style for all four sides of an element's border.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BorderTopStyleProp , [ BorderTopStyleProp ] , [ BorderTopStyleProp ] , [ BorderTopStyleProp ]", ebnf: "border-style =\n BorderTopStyleProp , [ BorderTopStyleProp ] , [ BorderTopStyleProp ] , [ BorderTopStyleProp ]", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: false, trueCount: 10, shown: 10, assists: [], values: [ v("solid", "border-style: solid;"), v("none", "border-style: none;"), v("hidden", "border-style: hidden;"), v("dotted", "border-style: dotted;"), v("dashed", "border-style: dashed;"), v("double", "border-style: double;"), v("groove", "border-style: groove;"), v("ridge", "border-style: ridge;"), v("inset", "border-style: inset;"), v("outset", "border-style: outset;"), ], }, { number: 252, name: "border-top", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-top\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets all the properties of an element's top \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border\"\u003eborder\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LineWidthType , [ LineStyleType , [ ColorType ] | ColorType , [ LineStyleType ] ]\n | LineStyleType , [ LineWidthType , [ ColorType ] | ColorType , [ LineWidthType ] ]\n | ColorType , [ LineWidthType , [ LineStyleType ] | LineStyleType , [ LineWidthType ] ]", ebnf: "border-top =\n LineWidthType , [ LineStyleType , [ ColorType ] | ColorType , [ LineStyleType ] ]\n | LineStyleType , [ LineWidthType , [ ColorType ] | ColorType , [ LineWidthType ] ]\n | ColorType , [ LineWidthType , [ LineStyleType ] | LineStyleType , [ LineWidthType ] ]", valueType: "length", defaultValue: "24px solid #2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 320, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px solid #c5483c", "border-top: 24px solid #c5483c;"), v("24px solid #2f5fd0", "border-top: 24px solid #2f5fd0;"), v("24px solid rgb(50%, 80%, 30%, 0.75)", "border-top: 24px solid rgb(50%, 80%, 30%, 0.75);"), v("24px solid rgb(1, 0.5, 2, 0.75)", "border-top: 24px solid rgb(1, 0.5, 2, 0.75);"), v("24px solid rgb(from #c5483c 80% 65% 100%/ 2)", "border-top: 24px solid rgb(from #c5483c 80% 65% 100%/ 2);"), v("24px solid rgba(50%, 80%, 30%, 0.75)", "border-top: 24px solid rgba(50%, 80%, 30%, 0.75);"), v("24px solid rgba(1, 0.5, 2, 0.75)", "border-top: 24px solid rgba(1, 0.5, 2, 0.75);"), v("24px solid rgba(from #c5483c 80% 65% 100%/ 2)", "border-top: 24px solid rgba(from #c5483c 80% 65% 100%/ 2);"), v("24px solid hsl(45deg, 30%, 65%, 0.25)", "border-top: 24px solid hsl(45deg, 30%, 65%, 0.25);"), v("24px solid hsl(from #c5483c 135deg 65% 100%/ 2)", "border-top: 24px solid hsl(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid hsla(45deg, 30%, 65%, 0.25)", "border-top: 24px solid hsla(45deg, 30%, 65%, 0.25);"), v("24px solid hsla(from #c5483c 135deg 65% 100%/ 2)", "border-top: 24px solid hsla(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid hwb(from #c5483c 135deg 65% 100%/ 2)", "border-top: 24px solid hwb(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid lab(from #c5483c 80% 15% 80%/ 1)", "border-top: 24px solid lab(from #c5483c 80% 15% 80%/ 1);"), v("24px solid lch(from #c5483c 80% 15% 250deg/ 1)", "border-top: 24px solid lch(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid oklab(from #c5483c 80% 15% 80%/ 1)", "border-top: 24px solid oklab(from #c5483c 80% 15% 80%/ 1);"), v("24px solid oklch(from #c5483c 80% 15% 250deg/ 1)", "border-top: 24px solid oklch(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid ictcp(from #c5483c 80% 15% 80%/ 1)", "border-top: 24px solid ictcp(from #c5483c 80% 15% 80%/ 1);"), v("24px solid jzazbz(from #c5483c 80% 15% 80%/ 1)", "border-top: 24px solid jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("24px solid jzczhz(from #c5483c 80% 15% 250deg/ 1)", "border-top: 24px solid jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid alpha(from #c5483c/ 0.5)", "border-top: 24px solid alpha(from #c5483c/ 0.5);"), v("24px solid color(from #c5483c --my-var 2/ 0.5)", "border-top: 24px solid color(from #c5483c --my-var 2/ 0.5);"), v("24px solid color-hdr(#c5483c 0.5, #c5483c 0.75)", "border-top: 24px solid color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("24px solid aliceblue", "border-top: 24px solid aliceblue;"), v("24px solid antiquewhite", "border-top: 24px solid antiquewhite;"), v("24px solid aqua", "border-top: 24px solid aqua;"), v("24px solid aquamarine", "border-top: 24px solid aquamarine;"), v("24px solid azure", "border-top: 24px solid azure;"), v("24px solid beige", "border-top: 24px solid beige;"), v("24px solid bisque", "border-top: 24px solid bisque;"), v("24px solid black", "border-top: 24px solid black;"), v("24px solid blanchedalmond", "border-top: 24px solid blanchedalmond;"), v("24px solid blue", "border-top: 24px solid blue;"), v("24px solid blueviolet", "border-top: 24px solid blueviolet;"), v("24px solid brown", "border-top: 24px solid brown;"), v("24px solid burlywood", "border-top: 24px solid burlywood;"), v("24px solid cadetblue", "border-top: 24px solid cadetblue;"), v("24px solid chartreuse", "border-top: 24px solid chartreuse;"), v("24px solid chocolate", "border-top: 24px solid chocolate;"), v("24px solid coral", "border-top: 24px solid coral;"), v("24px solid cornflowerblue", "border-top: 24px solid cornflowerblue;"), v("24px solid cornsilk", "border-top: 24px solid cornsilk;"), v("24px solid crimson", "border-top: 24px solid crimson;"), v("24px solid cyan", "border-top: 24px solid cyan;"), v("24px solid darkblue", "border-top: 24px solid darkblue;"), v("24px solid darkcyan", "border-top: 24px solid darkcyan;"), v("24px solid darkgoldenrod", "border-top: 24px solid darkgoldenrod;"), v("24px solid darkgray", "border-top: 24px solid darkgray;"), v("24px solid darkgreen", "border-top: 24px solid darkgreen;"), v("24px solid darkgrey", "border-top: 24px solid darkgrey;"), ], }, { number: 253, name: "border-top-color", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-top-color\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the color of an element's top \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border\"\u003eborder\u003c/a\u003e. It can also be set with the shorthand CSS properties \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-color\"\u003e\u003ccode\u003eborder-color\u003c/code\u003e\u003c/a\u003e or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-top\"\u003e\u003ccode\u003eborder-top\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ColorType | Image1dType", ebnf: "border-top-color =\n ColorType | Image1dType", valueType: "keyword", defaultValue: "#2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 161, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003cflex\u003e", samples: ["1fr", "2fr", "3fr"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("#c5483c", "border-top-color: #c5483c;"), v("#2f5fd0", "border-top-color: #2f5fd0;"), v("rgb(50%, 80%, 30%, 0.75)", "border-top-color: rgb(50%, 80%, 30%, 0.75);"), v("rgb(1, 0.5, 2, 0.75)", "border-top-color: rgb(1, 0.5, 2, 0.75);"), v("rgb(from #c5483c 80% 65% 100%/ 2)", "border-top-color: rgb(from #c5483c 80% 65% 100%/ 2);"), v("rgba(50%, 80%, 30%, 0.75)", "border-top-color: rgba(50%, 80%, 30%, 0.75);"), v("rgba(1, 0.5, 2, 0.75)", "border-top-color: rgba(1, 0.5, 2, 0.75);"), v("rgba(from #c5483c 80% 65% 100%/ 2)", "border-top-color: rgba(from #c5483c 80% 65% 100%/ 2);"), v("hsl(45deg, 30%, 65%, 0.25)", "border-top-color: hsl(45deg, 30%, 65%, 0.25);"), v("hsl(from #c5483c 135deg 65% 100%/ 2)", "border-top-color: hsl(from #c5483c 135deg 65% 100%/ 2);"), v("hsla(45deg, 30%, 65%, 0.25)", "border-top-color: hsla(45deg, 30%, 65%, 0.25);"), v("hsla(from #c5483c 135deg 65% 100%/ 2)", "border-top-color: hsla(from #c5483c 135deg 65% 100%/ 2);"), v("hwb(from #c5483c 135deg 65% 100%/ 2)", "border-top-color: hwb(from #c5483c 135deg 65% 100%/ 2);"), v("lab(from #c5483c 80% 15% 80%/ 1)", "border-top-color: lab(from #c5483c 80% 15% 80%/ 1);"), v("lch(from #c5483c 80% 15% 250deg/ 1)", "border-top-color: lch(from #c5483c 80% 15% 250deg/ 1);"), v("oklab(from #c5483c 80% 15% 80%/ 1)", "border-top-color: oklab(from #c5483c 80% 15% 80%/ 1);"), v("oklch(from #c5483c 80% 15% 250deg/ 1)", "border-top-color: oklch(from #c5483c 80% 15% 250deg/ 1);"), v("ictcp(from #c5483c 80% 15% 80%/ 1)", "border-top-color: ictcp(from #c5483c 80% 15% 80%/ 1);"), v("jzazbz(from #c5483c 80% 15% 80%/ 1)", "border-top-color: jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("jzczhz(from #c5483c 80% 15% 250deg/ 1)", "border-top-color: jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("alpha(from #c5483c/ 0.5)", "border-top-color: alpha(from #c5483c/ 0.5);"), v("color(from #c5483c --my-var 2/ 0.5)", "border-top-color: color(from #c5483c --my-var 2/ 0.5);"), v("color-hdr(#c5483c 0.5, #c5483c 0.75)", "border-top-color: color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("aliceblue", "border-top-color: aliceblue;"), v("antiquewhite", "border-top-color: antiquewhite;"), v("aqua", "border-top-color: aqua;"), v("aquamarine", "border-top-color: aquamarine;"), v("azure", "border-top-color: azure;"), v("beige", "border-top-color: beige;"), v("bisque", "border-top-color: bisque;"), v("black", "border-top-color: black;"), v("blanchedalmond", "border-top-color: blanchedalmond;"), v("blue", "border-top-color: blue;"), v("blueviolet", "border-top-color: blueviolet;"), v("brown", "border-top-color: brown;"), v("burlywood", "border-top-color: burlywood;"), v("cadetblue", "border-top-color: cadetblue;"), v("chartreuse", "border-top-color: chartreuse;"), v("chocolate", "border-top-color: chocolate;"), v("coral", "border-top-color: coral;"), v("cornflowerblue", "border-top-color: cornflowerblue;"), v("cornsilk", "border-top-color: cornsilk;"), v("crimson", "border-top-color: crimson;"), v("cyan", "border-top-color: cyan;"), v("darkblue", "border-top-color: darkblue;"), v("darkcyan", "border-top-color: darkcyan;"), v("darkgoldenrod", "border-top-color: darkgoldenrod;"), v("darkgray", "border-top-color: darkgray;"), v("darkgreen", "border-top-color: darkgreen;"), v("darkgrey", "border-top-color: darkgrey;"), ], }, { number: 254, name: "border-top-left-radius", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-top-left-radius\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "NonNegativeLengthPercentageType , [ NonNegativeLengthPercentageType ]", ebnf: "border-top-left-radius =\n NonNegativeLengthPercentageType , [ NonNegativeLengthPercentageType ]", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 18, shown: 18, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "border-top-left-radius: 24px;"), v("48px", "border-top-left-radius: 48px;"), v("8px", "border-top-left-radius: 8px;"), v("16px", "border-top-left-radius: 16px;"), v("64px", "border-top-left-radius: 64px;"), v("50%", "border-top-left-radius: 50%;"), v("80%", "border-top-left-radius: 80%;"), v("30%", "border-top-left-radius: 30%;"), v("65%", "border-top-left-radius: 65%;"), v("15%", "border-top-left-radius: 15%;"), v("100%", "border-top-left-radius: 100%;"), v("calc(24px)", "border-top-left-radius: calc(24px);"), v("clamp(24px, 2em, 48px)", "border-top-left-radius: clamp(24px, 2em, 48px);"), v("min(24px)", "border-top-left-radius: min(24px);"), v("max(24px)", "border-top-left-radius: max(24px);"), v("round(nearest, 24px, 2em)", "border-top-left-radius: round(nearest, 24px, 2em);"), v("abs(24px)", "border-top-left-radius: abs(24px);"), v("env(my-ident, 48px)", "border-top-left-radius: env(my-ident, 48px);"), ], }, { number: 255, name: "border-top-right-radius", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-top-right-radius\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "NonNegativeLengthPercentageType , [ NonNegativeLengthPercentageType ]", ebnf: "border-top-right-radius =\n NonNegativeLengthPercentageType , [ NonNegativeLengthPercentageType ]", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 18, shown: 18, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "border-top-right-radius: 24px;"), v("48px", "border-top-right-radius: 48px;"), v("8px", "border-top-right-radius: 8px;"), v("16px", "border-top-right-radius: 16px;"), v("64px", "border-top-right-radius: 64px;"), v("50%", "border-top-right-radius: 50%;"), v("80%", "border-top-right-radius: 80%;"), v("30%", "border-top-right-radius: 30%;"), v("65%", "border-top-right-radius: 65%;"), v("15%", "border-top-right-radius: 15%;"), v("100%", "border-top-right-radius: 100%;"), v("calc(24px)", "border-top-right-radius: calc(24px);"), v("clamp(24px, 2em, 48px)", "border-top-right-radius: clamp(24px, 2em, 48px);"), v("min(24px)", "border-top-right-radius: min(24px);"), v("max(24px)", "border-top-right-radius: max(24px);"), v("round(nearest, 24px, 2em)", "border-top-right-radius: round(nearest, 24px, 2em);"), v("abs(24px)", "border-top-right-radius: abs(24px);"), v("env(my-ident, 48px)", "border-top-right-radius: env(my-ident, 48px);"), ], }, { number: 256, name: "border-top-style", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-top-style\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the line style of an element's top \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border\"\u003e\u003ccode\u003eborder\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LineStyleType", ebnf: "border-top-style =\n LineStyleType", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: false, trueCount: 10, shown: 10, assists: [], values: [ v("solid", "border-top-style: solid;"), v("none", "border-top-style: none;"), v("hidden", "border-top-style: hidden;"), v("dotted", "border-top-style: dotted;"), v("dashed", "border-top-style: dashed;"), v("double", "border-top-style: double;"), v("groove", "border-top-style: groove;"), v("ridge", "border-top-style: ridge;"), v("inset", "border-top-style: inset;"), v("outset", "border-top-style: outset;"), ], }, { number: 257, name: "border-top-width", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-top-width\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the width of the top border of an element.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LineWidthType", ebnf: "border-top-width =\n LineWidthType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 8, shown: 8, assists: [{ type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "border-top-width: 24px;"), v("48px", "border-top-width: 48px;"), v("8px", "border-top-width: 8px;"), v("16px", "border-top-width: 16px;"), v("64px", "border-top-width: 64px;"), v("thin", "border-top-width: thin;"), v("medium", "border-top-width: medium;"), v("thick", "border-top-width: thick;"), ], }, { number: 258, name: "border-width", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eborder-width\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the width of an element's border.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BorderTopWidthProp , [ BorderTopWidthProp ] , [ BorderTopWidthProp ] , [ BorderTopWidthProp ]", ebnf: "border-width =\n BorderTopWidthProp , [ BorderTopWidthProp ] , [ BorderTopWidthProp ] , [ BorderTopWidthProp ]", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 8, shown: 8, assists: [{ type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "border-width: 24px;"), v("48px", "border-width: 48px;"), v("8px", "border-width: 8px;"), v("16px", "border-width: 16px;"), v("64px", "border-width: 64px;"), v("thin", "border-width: thin;"), v("medium", "border-width: medium;"), v("thick", "border-width: thick;"), ], }, { number: 259, name: "corner-block-end-shape", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecorner-block-end-shape\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the shape of both the corners on a box's block-end edge, within their \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-radius\"\u003e\u003ccode\u003eborder-radius\u003c/code\u003e\u003c/a\u003e area.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "CornerTopLeftShapeProp , [ CornerTopLeftShapeProp ]", ebnf: "corner-block-end-shape =\n CornerTopLeftShapeProp , [ CornerTopLeftShapeProp ]", valueType: "keyword", defaultValue: "scoop", related: [], provenance: "assisted", truncated: false, trueCount: 7, shown: 7, assists: [{ type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }], values: [ v("round", "corner-block-end-shape: round;"), v("scoop", "corner-block-end-shape: scoop;"), v("bevel", "corner-block-end-shape: bevel;"), v("notch", "corner-block-end-shape: notch;"), v("square", "corner-block-end-shape: square;"), v("squircle", "corner-block-end-shape: squircle;"), v("superellipse(1)", "corner-block-end-shape: superellipse(1);"), ], }, { number: 260, name: "corner-block-start-shape", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecorner-block-start-shape\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the shape of both the corners on a box's block-start edge, within their \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-radius\"\u003e\u003ccode\u003eborder-radius\u003c/code\u003e\u003c/a\u003e area.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "CornerTopLeftShapeProp , [ CornerTopLeftShapeProp ]", ebnf: "corner-block-start-shape =\n CornerTopLeftShapeProp , [ CornerTopLeftShapeProp ]", valueType: "keyword", defaultValue: "scoop", related: [], provenance: "assisted", truncated: false, trueCount: 7, shown: 7, assists: [{ type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }], values: [ v("round", "corner-block-start-shape: round;"), v("scoop", "corner-block-start-shape: scoop;"), v("bevel", "corner-block-start-shape: bevel;"), v("notch", "corner-block-start-shape: notch;"), v("square", "corner-block-start-shape: square;"), v("squircle", "corner-block-start-shape: squircle;"), v("superellipse(1)", "corner-block-start-shape: superellipse(1);"), ], }, { number: 261, name: "corner-bottom-left-shape", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecorner-bottom-left-shape\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the shape of a box's bottom-left corner, within its \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-radius\"\u003e\u003ccode\u003eborder-radius\u003c/code\u003e\u003c/a\u003e area.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "CornerShapeValueType", ebnf: "corner-bottom-left-shape =\n CornerShapeValueType", valueType: "keyword", defaultValue: "scoop", related: [], provenance: "assisted", truncated: false, trueCount: 7, shown: 7, assists: [{ type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }], values: [ v("round", "corner-bottom-left-shape: round;"), v("scoop", "corner-bottom-left-shape: scoop;"), v("bevel", "corner-bottom-left-shape: bevel;"), v("notch", "corner-bottom-left-shape: notch;"), v("square", "corner-bottom-left-shape: square;"), v("squircle", "corner-bottom-left-shape: squircle;"), v("superellipse(1)", "corner-bottom-left-shape: superellipse(1);"), ], }, { number: 262, name: "corner-bottom-right-shape", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecorner-bottom-right-shape\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the shape of a box's bottom-right corner, within its \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-radius\"\u003e\u003ccode\u003eborder-radius\u003c/code\u003e\u003c/a\u003e area.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "CornerShapeValueType", ebnf: "corner-bottom-right-shape =\n CornerShapeValueType", valueType: "keyword", defaultValue: "scoop", related: [], provenance: "assisted", truncated: false, trueCount: 7, shown: 7, assists: [{ type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }], values: [ v("round", "corner-bottom-right-shape: round;"), v("scoop", "corner-bottom-right-shape: scoop;"), v("bevel", "corner-bottom-right-shape: bevel;"), v("notch", "corner-bottom-right-shape: notch;"), v("square", "corner-bottom-right-shape: square;"), v("squircle", "corner-bottom-right-shape: squircle;"), v("superellipse(1)", "corner-bottom-right-shape: superellipse(1);"), ], }, { number: 263, name: "corner-bottom-shape", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecorner-bottom-shape\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the shape of both the corners on a box's bottom edge, within their \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-radius\"\u003e\u003ccode\u003eborder-radius\u003c/code\u003e\u003c/a\u003e area.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "CornerTopLeftShapeProp , [ CornerTopLeftShapeProp ]", ebnf: "corner-bottom-shape =\n CornerTopLeftShapeProp , [ CornerTopLeftShapeProp ]", valueType: "keyword", defaultValue: "scoop", related: [], provenance: "assisted", truncated: false, trueCount: 7, shown: 7, assists: [{ type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }], values: [ v("round", "corner-bottom-shape: round;"), v("scoop", "corner-bottom-shape: scoop;"), v("bevel", "corner-bottom-shape: bevel;"), v("notch", "corner-bottom-shape: notch;"), v("square", "corner-bottom-shape: square;"), v("squircle", "corner-bottom-shape: squircle;"), v("superellipse(1)", "corner-bottom-shape: superellipse(1);"), ], }, { number: 264, name: "corner-end-end-shape", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecorner-end-end-shape\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the shape of a box's block-end and inline-end corner, within its \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-radius\"\u003e\u003ccode\u003eborder-radius\u003c/code\u003e\u003c/a\u003e area.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "CornerShapeValueType", ebnf: "corner-end-end-shape =\n CornerShapeValueType", valueType: "keyword", defaultValue: "scoop", related: [], provenance: "assisted", truncated: false, trueCount: 7, shown: 7, assists: [{ type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }], values: [ v("round", "corner-end-end-shape: round;"), v("scoop", "corner-end-end-shape: scoop;"), v("bevel", "corner-end-end-shape: bevel;"), v("notch", "corner-end-end-shape: notch;"), v("square", "corner-end-end-shape: square;"), v("squircle", "corner-end-end-shape: squircle;"), v("superellipse(1)", "corner-end-end-shape: superellipse(1);"), ], }, { number: 265, name: "corner-end-start-shape", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecorner-end-start-shape\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the shape of a box's block-end and inline-start corner, within its \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-radius\"\u003e\u003ccode\u003eborder-radius\u003c/code\u003e\u003c/a\u003e area.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "CornerShapeValueType", ebnf: "corner-end-start-shape =\n CornerShapeValueType", valueType: "keyword", defaultValue: "scoop", related: [], provenance: "assisted", truncated: false, trueCount: 7, shown: 7, assists: [{ type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }], values: [ v("round", "corner-end-start-shape: round;"), v("scoop", "corner-end-start-shape: scoop;"), v("bevel", "corner-end-start-shape: bevel;"), v("notch", "corner-end-start-shape: notch;"), v("square", "corner-end-start-shape: square;"), v("squircle", "corner-end-start-shape: squircle;"), v("superellipse(1)", "corner-end-start-shape: superellipse(1);"), ], }, { number: 266, name: "corner-inline-end-shape", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecorner-inline-end-shape\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the shape of both the corners on a box's inline-end edge, within their \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-radius\"\u003e\u003ccode\u003eborder-radius\u003c/code\u003e\u003c/a\u003e area.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "CornerTopLeftShapeProp , [ CornerTopLeftShapeProp ]", ebnf: "corner-inline-end-shape =\n CornerTopLeftShapeProp , [ CornerTopLeftShapeProp ]", valueType: "keyword", defaultValue: "scoop", related: [], provenance: "assisted", truncated: false, trueCount: 7, shown: 7, assists: [{ type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }], values: [ v("round", "corner-inline-end-shape: round;"), v("scoop", "corner-inline-end-shape: scoop;"), v("bevel", "corner-inline-end-shape: bevel;"), v("notch", "corner-inline-end-shape: notch;"), v("square", "corner-inline-end-shape: square;"), v("squircle", "corner-inline-end-shape: squircle;"), v("superellipse(1)", "corner-inline-end-shape: superellipse(1);"), ], }, { number: 267, name: "corner-inline-start-shape", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecorner-inline-start-shape\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the shape of both the corners on a box's inline-start edge, within their \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-radius\"\u003e\u003ccode\u003eborder-radius\u003c/code\u003e\u003c/a\u003e area.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "CornerTopLeftShapeProp , [ CornerTopLeftShapeProp ]", ebnf: "corner-inline-start-shape =\n CornerTopLeftShapeProp , [ CornerTopLeftShapeProp ]", valueType: "keyword", defaultValue: "scoop", related: [], provenance: "assisted", truncated: false, trueCount: 7, shown: 7, assists: [{ type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }], values: [ v("round", "corner-inline-start-shape: round;"), v("scoop", "corner-inline-start-shape: scoop;"), v("bevel", "corner-inline-start-shape: bevel;"), v("notch", "corner-inline-start-shape: notch;"), v("square", "corner-inline-start-shape: square;"), v("squircle", "corner-inline-start-shape: squircle;"), v("superellipse(1)", "corner-inline-start-shape: superellipse(1);"), ], }, { number: 268, name: "corner-left-shape", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecorner-left-shape\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the shape of both the corners on a box's left-hand edge, within their \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-radius\"\u003e\u003ccode\u003eborder-radius\u003c/code\u003e\u003c/a\u003e area.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "CornerTopLeftShapeProp , [ CornerTopLeftShapeProp ]", ebnf: "corner-left-shape =\n CornerTopLeftShapeProp , [ CornerTopLeftShapeProp ]", valueType: "keyword", defaultValue: "scoop", related: [], provenance: "assisted", truncated: false, trueCount: 7, shown: 7, assists: [{ type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }], values: [ v("round", "corner-left-shape: round;"), v("scoop", "corner-left-shape: scoop;"), v("bevel", "corner-left-shape: bevel;"), v("notch", "corner-left-shape: notch;"), v("square", "corner-left-shape: square;"), v("squircle", "corner-left-shape: squircle;"), v("superellipse(1)", "corner-left-shape: superellipse(1);"), ], }, { number: 269, name: "corner-right-shape", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecorner-right-shape\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the shape of both the corners on a box's right-hand edge, within their \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-radius\"\u003e\u003ccode\u003eborder-radius\u003c/code\u003e\u003c/a\u003e area.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "CornerTopLeftShapeProp , [ CornerTopLeftShapeProp ]", ebnf: "corner-right-shape =\n CornerTopLeftShapeProp , [ CornerTopLeftShapeProp ]", valueType: "keyword", defaultValue: "scoop", related: [], provenance: "assisted", truncated: false, trueCount: 7, shown: 7, assists: [{ type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }], values: [ v("round", "corner-right-shape: round;"), v("scoop", "corner-right-shape: scoop;"), v("bevel", "corner-right-shape: bevel;"), v("notch", "corner-right-shape: notch;"), v("square", "corner-right-shape: square;"), v("squircle", "corner-right-shape: squircle;"), v("superellipse(1)", "corner-right-shape: superellipse(1);"), ], }, { number: 270, name: "corner-shape", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecorner-shape\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the shape of a box's corners, within the area specified by its \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-radius\"\u003e\u003ccode\u003eborder-radius\u003c/code\u003e\u003c/a\u003e property value.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "CornerTopLeftShapeProp , [ CornerTopLeftShapeProp ] , [ CornerTopLeftShapeProp ] , [ CornerTopLeftShapeProp ]", ebnf: "corner-shape =\n CornerTopLeftShapeProp , [ CornerTopLeftShapeProp ] , [ CornerTopLeftShapeProp ] , [ CornerTopLeftShapeProp ]", valueType: "keyword", defaultValue: "scoop", related: [], provenance: "assisted", truncated: false, trueCount: 7, shown: 7, assists: [{ type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }], values: [ v("round", "corner-shape: round;"), v("scoop", "corner-shape: scoop;"), v("bevel", "corner-shape: bevel;"), v("notch", "corner-shape: notch;"), v("square", "corner-shape: square;"), v("squircle", "corner-shape: squircle;"), v("superellipse(1)", "corner-shape: superellipse(1);"), ], }, { number: 271, name: "corner-start-end-shape", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecorner-start-end-shape\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the shape of a box's block-start and inline-end corner, within its \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-radius\"\u003e\u003ccode\u003eborder-radius\u003c/code\u003e\u003c/a\u003e area.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "CornerShapeValueType", ebnf: "corner-start-end-shape =\n CornerShapeValueType", valueType: "keyword", defaultValue: "scoop", related: [], provenance: "assisted", truncated: false, trueCount: 7, shown: 7, assists: [{ type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }], values: [ v("round", "corner-start-end-shape: round;"), v("scoop", "corner-start-end-shape: scoop;"), v("bevel", "corner-start-end-shape: bevel;"), v("notch", "corner-start-end-shape: notch;"), v("square", "corner-start-end-shape: square;"), v("squircle", "corner-start-end-shape: squircle;"), v("superellipse(1)", "corner-start-end-shape: superellipse(1);"), ], }, { number: 272, name: "corner-start-start-shape", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecorner-start-start-shape\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the shape of a box's block-start and inline-start corner, within its \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-radius\"\u003e\u003ccode\u003eborder-radius\u003c/code\u003e\u003c/a\u003e area.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "CornerShapeValueType", ebnf: "corner-start-start-shape =\n CornerShapeValueType", valueType: "keyword", defaultValue: "scoop", related: [], provenance: "assisted", truncated: false, trueCount: 7, shown: 7, assists: [{ type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }], values: [ v("round", "corner-start-start-shape: round;"), v("scoop", "corner-start-start-shape: scoop;"), v("bevel", "corner-start-start-shape: bevel;"), v("notch", "corner-start-start-shape: notch;"), v("square", "corner-start-start-shape: square;"), v("squircle", "corner-start-start-shape: squircle;"), v("superellipse(1)", "corner-start-start-shape: superellipse(1);"), ], }, { number: 273, name: "corner-top-left-shape", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecorner-top-left-shape\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the shape of a box's top-left corner, within its \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-radius\"\u003e\u003ccode\u003eborder-radius\u003c/code\u003e\u003c/a\u003e area.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "CornerShapeValueType", ebnf: "corner-top-left-shape =\n CornerShapeValueType", valueType: "keyword", defaultValue: "scoop", related: [], provenance: "assisted", truncated: false, trueCount: 7, shown: 7, assists: [{ type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }], values: [ v("round", "corner-top-left-shape: round;"), v("scoop", "corner-top-left-shape: scoop;"), v("bevel", "corner-top-left-shape: bevel;"), v("notch", "corner-top-left-shape: notch;"), v("square", "corner-top-left-shape: square;"), v("squircle", "corner-top-left-shape: squircle;"), v("superellipse(1)", "corner-top-left-shape: superellipse(1);"), ], }, { number: 274, name: "corner-top-right-shape", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecorner-top-right-shape\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the shape of a box's top-right corner, within its \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-radius\"\u003e\u003ccode\u003eborder-radius\u003c/code\u003e\u003c/a\u003e area.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "CornerShapeValueType", ebnf: "corner-top-right-shape =\n CornerShapeValueType", valueType: "keyword", defaultValue: "scoop", related: [], provenance: "assisted", truncated: false, trueCount: 7, shown: 7, assists: [{ type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }], values: [ v("round", "corner-top-right-shape: round;"), v("scoop", "corner-top-right-shape: scoop;"), v("bevel", "corner-top-right-shape: bevel;"), v("notch", "corner-top-right-shape: notch;"), v("square", "corner-top-right-shape: square;"), v("squircle", "corner-top-right-shape: squircle;"), v("superellipse(1)", "corner-top-right-shape: superellipse(1);"), ], }, { number: 275, name: "corner-top-shape", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecorner-top-shape\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the shape of both the corners on a box's top edge, within their \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border-radius\"\u003e\u003ccode\u003eborder-radius\u003c/code\u003e\u003c/a\u003e area.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "CornerTopLeftShapeProp , [ CornerTopLeftShapeProp ]", ebnf: "corner-top-shape =\n CornerTopLeftShapeProp , [ CornerTopLeftShapeProp ]", valueType: "keyword", defaultValue: "scoop", related: [], provenance: "assisted", truncated: false, trueCount: 7, shown: 7, assists: [{ type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }], values: [ v("round", "corner-top-shape: round;"), v("scoop", "corner-top-shape: scoop;"), v("bevel", "corner-top-shape: bevel;"), v("notch", "corner-top-shape: notch;"), v("square", "corner-top-shape: square;"), v("squircle", "corner-top-shape: squircle;"), v("superellipse(1)", "corner-top-shape: superellipse(1);"), ], }, { number: 276, name: "outline", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eoutline\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e sets most of the outline properties in a single declaration.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "OutlineWidthProp , [ OutlineStyleProp , [ OutlineColorProp ] | OutlineColorProp , [ OutlineStyleProp ] ]\n | OutlineStyleProp , [ OutlineWidthProp , [ OutlineColorProp ] | OutlineColorProp , [ OutlineWidthProp ] ]\n | OutlineColorProp , [ OutlineWidthProp , [ OutlineStyleProp ] | OutlineStyleProp , [ OutlineWidthProp ] ]", ebnf: "outline =\n OutlineWidthProp , [ OutlineStyleProp , [ OutlineColorProp ] | OutlineColorProp , [ OutlineStyleProp ] ]\n | OutlineStyleProp , [ OutlineWidthProp , [ OutlineColorProp ] | OutlineColorProp , [ OutlineWidthProp ] ]\n | OutlineColorProp , [ OutlineWidthProp , [ OutlineStyleProp ] | OutlineStyleProp , [ OutlineWidthProp ] ]", valueType: "length", defaultValue: "24px auto #c5483c", related: [], provenance: "assisted", truncated: true, trueCount: 320, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003cflex\u003e", samples: ["1fr", "2fr", "3fr"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px auto auto", "outline: 24px auto auto;"), v("24px auto #c5483c", "outline: 24px auto #c5483c;"), v("24px auto #2f5fd0", "outline: 24px auto #2f5fd0;"), v("24px auto rgb(50%, 80%, 30%, 0.75)", "outline: 24px auto rgb(50%, 80%, 30%, 0.75);"), v("24px auto rgb(1, 0.5, 2, 0.75)", "outline: 24px auto rgb(1, 0.5, 2, 0.75);"), v("24px auto rgb(from #c5483c 80% 65% 100%/ 2)", "outline: 24px auto rgb(from #c5483c 80% 65% 100%/ 2);"), v("24px auto rgba(50%, 80%, 30%, 0.75)", "outline: 24px auto rgba(50%, 80%, 30%, 0.75);"), v("24px auto rgba(1, 0.5, 2, 0.75)", "outline: 24px auto rgba(1, 0.5, 2, 0.75);"), v("24px auto rgba(from #c5483c 80% 65% 100%/ 2)", "outline: 24px auto rgba(from #c5483c 80% 65% 100%/ 2);"), v("24px auto hsl(45deg, 30%, 65%, 0.25)", "outline: 24px auto hsl(45deg, 30%, 65%, 0.25);"), v("24px auto hsl(from #c5483c 135deg 65% 100%/ 2)", "outline: 24px auto hsl(from #c5483c 135deg 65% 100%/ 2);"), v("24px auto hsla(45deg, 30%, 65%, 0.25)", "outline: 24px auto hsla(45deg, 30%, 65%, 0.25);"), v("24px auto hsla(from #c5483c 135deg 65% 100%/ 2)", "outline: 24px auto hsla(from #c5483c 135deg 65% 100%/ 2);"), v("24px auto hwb(from #c5483c 135deg 65% 100%/ 2)", "outline: 24px auto hwb(from #c5483c 135deg 65% 100%/ 2);"), v("24px auto lab(from #c5483c 80% 15% 80%/ 1)", "outline: 24px auto lab(from #c5483c 80% 15% 80%/ 1);"), v("24px auto lch(from #c5483c 80% 15% 250deg/ 1)", "outline: 24px auto lch(from #c5483c 80% 15% 250deg/ 1);"), v("24px auto oklab(from #c5483c 80% 15% 80%/ 1)", "outline: 24px auto oklab(from #c5483c 80% 15% 80%/ 1);"), v("24px auto oklch(from #c5483c 80% 15% 250deg/ 1)", "outline: 24px auto oklch(from #c5483c 80% 15% 250deg/ 1);"), v("24px auto ictcp(from #c5483c 80% 15% 80%/ 1)", "outline: 24px auto ictcp(from #c5483c 80% 15% 80%/ 1);"), v("24px auto jzazbz(from #c5483c 80% 15% 80%/ 1)", "outline: 24px auto jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("24px auto jzczhz(from #c5483c 80% 15% 250deg/ 1)", "outline: 24px auto jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("24px auto alpha(from #c5483c/ 0.5)", "outline: 24px auto alpha(from #c5483c/ 0.5);"), v("24px auto color(from #c5483c --my-var 2/ 0.5)", "outline: 24px auto color(from #c5483c --my-var 2/ 0.5);"), v("24px auto color-hdr(#c5483c 0.5, #c5483c 0.75)", "outline: 24px auto color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("24px auto aliceblue", "outline: 24px auto aliceblue;"), v("24px auto antiquewhite", "outline: 24px auto antiquewhite;"), v("24px auto aqua", "outline: 24px auto aqua;"), v("24px auto aquamarine", "outline: 24px auto aquamarine;"), v("24px auto azure", "outline: 24px auto azure;"), v("24px auto beige", "outline: 24px auto beige;"), v("24px auto bisque", "outline: 24px auto bisque;"), v("24px auto black", "outline: 24px auto black;"), v("24px auto blanchedalmond", "outline: 24px auto blanchedalmond;"), v("24px auto blue", "outline: 24px auto blue;"), v("24px auto blueviolet", "outline: 24px auto blueviolet;"), v("24px auto brown", "outline: 24px auto brown;"), v("24px auto burlywood", "outline: 24px auto burlywood;"), v("24px auto cadetblue", "outline: 24px auto cadetblue;"), v("24px auto chartreuse", "outline: 24px auto chartreuse;"), v("24px auto chocolate", "outline: 24px auto chocolate;"), v("24px auto coral", "outline: 24px auto coral;"), v("24px auto cornflowerblue", "outline: 24px auto cornflowerblue;"), v("24px auto cornsilk", "outline: 24px auto cornsilk;"), v("24px auto crimson", "outline: 24px auto crimson;"), v("24px auto cyan", "outline: 24px auto cyan;"), v("24px auto darkblue", "outline: 24px auto darkblue;"), v("24px auto darkcyan", "outline: 24px auto darkcyan;"), v("24px auto darkgoldenrod", "outline: 24px auto darkgoldenrod;"), v("24px auto darkgray", "outline: 24px auto darkgray;"), v("24px auto darkgreen", "outline: 24px auto darkgreen;"), ], }, { number: 277, name: "outline-color", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eoutline-color\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the color of an element's outline.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | BorderTopColorProp", ebnf: "outline-color =\n \"auto\" | BorderTopColorProp", valueType: "keyword", defaultValue: "#c5483c", related: [], provenance: "assisted", truncated: true, trueCount: 161, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003cflex\u003e", samples: ["1fr", "2fr", "3fr"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "outline-color: auto;"), v("#c5483c", "outline-color: #c5483c;"), v("#2f5fd0", "outline-color: #2f5fd0;"), v("rgb(50%, 80%, 30%, 0.75)", "outline-color: rgb(50%, 80%, 30%, 0.75);"), v("rgb(1, 0.5, 2, 0.75)", "outline-color: rgb(1, 0.5, 2, 0.75);"), v("rgb(from #c5483c 80% 65% 100%/ 2)", "outline-color: rgb(from #c5483c 80% 65% 100%/ 2);"), v("rgba(50%, 80%, 30%, 0.75)", "outline-color: rgba(50%, 80%, 30%, 0.75);"), v("rgba(1, 0.5, 2, 0.75)", "outline-color: rgba(1, 0.5, 2, 0.75);"), v("rgba(from #c5483c 80% 65% 100%/ 2)", "outline-color: rgba(from #c5483c 80% 65% 100%/ 2);"), v("hsl(45deg, 30%, 65%, 0.25)", "outline-color: hsl(45deg, 30%, 65%, 0.25);"), v("hsl(from #c5483c 135deg 65% 100%/ 2)", "outline-color: hsl(from #c5483c 135deg 65% 100%/ 2);"), v("hsla(45deg, 30%, 65%, 0.25)", "outline-color: hsla(45deg, 30%, 65%, 0.25);"), v("hsla(from #c5483c 135deg 65% 100%/ 2)", "outline-color: hsla(from #c5483c 135deg 65% 100%/ 2);"), v("hwb(from #c5483c 135deg 65% 100%/ 2)", "outline-color: hwb(from #c5483c 135deg 65% 100%/ 2);"), v("lab(from #c5483c 80% 15% 80%/ 1)", "outline-color: lab(from #c5483c 80% 15% 80%/ 1);"), v("lch(from #c5483c 80% 15% 250deg/ 1)", "outline-color: lch(from #c5483c 80% 15% 250deg/ 1);"), v("oklab(from #c5483c 80% 15% 80%/ 1)", "outline-color: oklab(from #c5483c 80% 15% 80%/ 1);"), v("oklch(from #c5483c 80% 15% 250deg/ 1)", "outline-color: oklch(from #c5483c 80% 15% 250deg/ 1);"), v("ictcp(from #c5483c 80% 15% 80%/ 1)", "outline-color: ictcp(from #c5483c 80% 15% 80%/ 1);"), v("jzazbz(from #c5483c 80% 15% 80%/ 1)", "outline-color: jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("jzczhz(from #c5483c 80% 15% 250deg/ 1)", "outline-color: jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("alpha(from #c5483c/ 0.5)", "outline-color: alpha(from #c5483c/ 0.5);"), v("color(from #c5483c --my-var 2/ 0.5)", "outline-color: color(from #c5483c --my-var 2/ 0.5);"), v("color-hdr(#c5483c 0.5, #c5483c 0.75)", "outline-color: color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("aliceblue", "outline-color: aliceblue;"), v("antiquewhite", "outline-color: antiquewhite;"), v("aqua", "outline-color: aqua;"), v("aquamarine", "outline-color: aquamarine;"), v("azure", "outline-color: azure;"), v("beige", "outline-color: beige;"), v("bisque", "outline-color: bisque;"), v("black", "outline-color: black;"), v("blanchedalmond", "outline-color: blanchedalmond;"), v("blue", "outline-color: blue;"), v("blueviolet", "outline-color: blueviolet;"), v("brown", "outline-color: brown;"), v("burlywood", "outline-color: burlywood;"), v("cadetblue", "outline-color: cadetblue;"), v("chartreuse", "outline-color: chartreuse;"), v("chocolate", "outline-color: chocolate;"), v("coral", "outline-color: coral;"), v("cornflowerblue", "outline-color: cornflowerblue;"), v("cornsilk", "outline-color: cornsilk;"), v("crimson", "outline-color: crimson;"), v("cyan", "outline-color: cyan;"), v("darkblue", "outline-color: darkblue;"), v("darkcyan", "outline-color: darkcyan;"), v("darkgoldenrod", "outline-color: darkgoldenrod;"), v("darkgray", "outline-color: darkgray;"), v("darkgreen", "outline-color: darkgreen;"), ], }, { number: 278, name: "outline-offset", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eoutline-offset\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the amount of space between an \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/outline\"\u003eoutline\u003c/a\u003e and the edge or border of an element.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LengthType", ebnf: "outline-offset =\n LengthType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "outline-offset: 24px;"), v("48px", "outline-offset: 48px;"), v("8px", "outline-offset: 8px;"), v("16px", "outline-offset: 16px;"), v("64px", "outline-offset: 64px;"), ], }, { number: 279, name: "outline-style", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eoutline-style\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the style of an element's outline. An outline is a line that is drawn around an element, outside the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border\"\u003e\u003ccode\u003eborder\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | OutlineLineStyleType", ebnf: "outline-style =\n \"auto\" | OutlineLineStyleType", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: false, trueCount: 10, shown: 10, assists: [], values: [ v("auto", "outline-style: auto;"), v("none", "outline-style: none;"), v("dotted", "outline-style: dotted;"), v("dashed", "outline-style: dashed;"), v("solid", "outline-style: solid;"), v("double", "outline-style: double;"), v("groove", "outline-style: groove;"), v("ridge", "outline-style: ridge;"), v("inset", "outline-style: inset;"), v("outset", "outline-style: outset;"), ], }, { number: 280, name: "outline-width", maturity: "modern", description: "The \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003cstrong\u003e\u003ccode\u003eoutline-width\u003c/code\u003e\u003c/strong\u003e property sets the thickness of an element's outline. An outline is a line that is drawn around an element, outside the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/border\"\u003e\u003ccode\u003eborder\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LineWidthType", ebnf: "outline-width =\n LineWidthType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 8, shown: 8, assists: [{ type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "outline-width: 24px;"), v("48px", "outline-width: 48px;"), v("8px", "outline-width: 8px;"), v("16px", "outline-width: 16px;"), v("64px", "outline-width: 64px;"), v("thin", "outline-width: thin;"), v("medium", "outline-width: medium;"), v("thick", "outline-width: thick;"), ], }, ], }, { id: "effects", sigil: "15", title: "Effects \u0026 Filters", blurb: "Shadows, filters, backdrop filters and blend modes.", demo: "generic", sampleKind: "box", group: "families", focus: false, gallery: false, count: 5, properties: [ { number: 281, name: "backdrop-filter", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebackdrop-filter\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything \u003cem\u003ebehind\u003c/em\u003e the element, to see the effect the element or its background needs to be transparent or partially transparent.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | FilterValueListType", ebnf: "backdrop-filter =\n \"none\" | FilterValueListType", valueType: "function", defaultValue: "blur(24px)", related: [], provenance: "assisted", truncated: false, trueCount: 12, shown: 12, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "FilterAmountType", samples: ["0.4", "1.8", "0.7", "2"] }, { type: "UrlType", samples: ["url(assets/photo.jpg)"] }], values: [ v("none", "backdrop-filter: none;"), v("blur(24px)", "backdrop-filter: blur(24px);"), v("brightness(0.4)", "backdrop-filter: brightness(0.4);"), v("contrast(0.4)", "backdrop-filter: contrast(0.4);"), v("drop-shadow(#c5483c 48px 8px 16px)", "backdrop-filter: drop-shadow(#c5483c 48px 8px 16px);"), v("grayscale(0.4)", "backdrop-filter: grayscale(0.4);"), v("hue-rotate(45deg)", "backdrop-filter: hue-rotate(45deg);"), v("invert(0.4)", "backdrop-filter: invert(0.4);"), v("opacity(0.4)", "backdrop-filter: opacity(0.4);"), v("sepia(0.4)", "backdrop-filter: sepia(0.4);"), v("saturate(0.4)", "backdrop-filter: saturate(0.4);"), v("url(assets/photo.jpg)", "backdrop-filter: url(assets/photo.jpg);"), ], }, { number: 282, name: "box-shadow", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebox-shadow\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | SpreadShadowType , { \",\" , SpreadShadowType }", ebnf: "box-shadow =\n \"none\" | SpreadShadowType , { \",\" , SpreadShadowType }", valueType: "length", defaultValue: "#c5483c 8px 8px 16px", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "SpreadShadowType", samples: ["#c5483c 8px 8px 16px", "0 6px 18px 2px #2f5fd0", "inset 3px 3px 8px #c5483c", "8px 8px 0 #2f5fd0"] }], values: [ v("none", "box-shadow: none;"), v("#c5483c 8px 8px 16px", "box-shadow: #c5483c 8px 8px 16px;"), v("0 6px 18px 2px #2f5fd0", "box-shadow: 0 6px 18px 2px #2f5fd0;"), v("inset 3px 3px 8px #c5483c", "box-shadow: inset 3px 3px 8px #c5483c;"), v("8px 8px 0 #2f5fd0", "box-shadow: 8px 8px 0 #2f5fd0;"), ], }, { number: 283, name: "filter", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efilter\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | FilterValueListType", ebnf: "filter =\n \"none\" | FilterValueListType", valueType: "function", defaultValue: "blur(24px)", related: [], provenance: "assisted", truncated: false, trueCount: 12, shown: 12, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "FilterAmountType", samples: ["0.4", "1.8", "0.7", "2"] }, { type: "UrlType", samples: ["url(assets/photo.jpg)"] }], values: [ v("none", "filter: none;"), v("blur(24px)", "filter: blur(24px);"), v("brightness(0.4)", "filter: brightness(0.4);"), v("contrast(0.4)", "filter: contrast(0.4);"), v("drop-shadow(#c5483c 48px 8px 16px)", "filter: drop-shadow(#c5483c 48px 8px 16px);"), v("grayscale(0.4)", "filter: grayscale(0.4);"), v("hue-rotate(45deg)", "filter: hue-rotate(45deg);"), v("invert(0.4)", "filter: invert(0.4);"), v("opacity(0.4)", "filter: opacity(0.4);"), v("sepia(0.4)", "filter: sepia(0.4);"), v("saturate(0.4)", "filter: saturate(0.4);"), v("url(assets/photo.jpg)", "filter: url(assets/photo.jpg);"), ], }, { number: 284, name: "isolation", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eisolation\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property determines whether an element must create a new \u003ca href=\"/en-US/docs/Glossary/Stacking_context\"\u003estacking context\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "IsolationModeType", ebnf: "isolation =\n IsolationModeType", valueType: "keyword", defaultValue: "isolate", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("auto", "isolation: auto;"), v("isolate", "isolation: isolate;"), ], }, { number: 285, name: "mix-blend-mode", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emix-blend-mode\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets how an element's content should blend with the content of the element's parent and the element's background.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BlendModeType | \"plus-darker\" | \"plus-lighter\"", ebnf: "mix-blend-mode =\n BlendModeType | \"plus-darker\" | \"plus-lighter\"", valueType: "keyword", defaultValue: "darken", related: [], provenance: "pure", truncated: false, trueCount: 18, shown: 18, assists: [], values: [ v("normal", "mix-blend-mode: normal;"), v("darken", "mix-blend-mode: darken;"), v("multiply", "mix-blend-mode: multiply;"), v("color-burn", "mix-blend-mode: color-burn;"), v("lighten", "mix-blend-mode: lighten;"), v("screen", "mix-blend-mode: screen;"), v("color-dodge", "mix-blend-mode: color-dodge;"), v("overlay", "mix-blend-mode: overlay;"), v("soft-light", "mix-blend-mode: soft-light;"), v("hard-light", "mix-blend-mode: hard-light;"), v("difference", "mix-blend-mode: difference;"), v("exclusion", "mix-blend-mode: exclusion;"), v("hue", "mix-blend-mode: hue;"), v("saturation", "mix-blend-mode: saturation;"), v("color", "mix-blend-mode: color;"), v("luminosity", "mix-blend-mode: luminosity;"), v("plus-darker", "mix-blend-mode: plus-darker;"), v("plus-lighter", "mix-blend-mode: plus-lighter;"), ], }, ], }, { id: "clip-mask", sigil: "16", title: "Clipping \u0026 Masking", blurb: "Constrain what is painted: clip paths, masks and geometry.", demo: "generic", sampleKind: "box", group: "families", focus: false, gallery: false, count: 20, properties: [ { number: 286, name: "clip", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eclip\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines a visible portion of an element. The \u003ccode\u003eclip\u003c/code\u003e property applies only to absolutely positioned elements — that is, elements with \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/position\"\u003e\u003ccode\u003eposition:absolute\u003c/code\u003e\u003c/a\u003e or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/position\"\u003e\u003ccode\u003eposition:fixed\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: true, warning: "\u003cstrong\u003eWarning:\u003c/strong\u003e Authors are encouraged to use the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/clip-path\"\u003e\u003ccode\u003eclip-path\u003c/code\u003e\u003c/a\u003e property instead.", syntax: "LegacyRectSyntaxType | \"auto\"", ebnf: "clip =\n LegacyRectSyntaxType | \"auto\"", valueType: "length", defaultValue: "auto", related: [], provenance: "assisted", truncated: false, trueCount: 2, shown: 2, assists: [{ type: "ClipRectEdgesType", samples: ["8px, 56px, 56px, 8px"] }], values: [ v("rect(8px, 56px, 56px, 8px)", "clip: rect(8px, 56px, 56px, 8px);"), v("auto", "clip: auto;"), ], }, { number: 287, name: "clip-path", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eclip-path\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ClipSourceType\n | BasicShapeType , [ GeometryBoxType ] | GeometryBoxType , [ BasicShapeType ]\n | \"none\"", ebnf: "clip-path =\n ClipSourceType\n | BasicShapeType , [ GeometryBoxType ] | GeometryBoxType , [ BasicShapeType ]\n | \"none\"", valueType: "function", defaultValue: "circle(44%) content-box", related: [], provenance: "assisted", truncated: false, trueCount: 69, shown: 50, assists: [{ type: "BasicShapeType", samples: ["circle(44%)", "ellipse(48% 32%)", "inset(14% round 14px)", "polygon(50% 4%, 96% 96%, 4% 96%)"] }, { type: "UrlType", samples: ["url(assets/photo.jpg)"] }], values: [ v("url(assets/photo.jpg)", "clip-path: url(assets/photo.jpg);"), v("circle(44%) content-box", "clip-path: circle(44%) content-box;"), v("circle(44%) padding-box", "clip-path: circle(44%) padding-box;"), v("circle(44%) border-box", "clip-path: circle(44%) border-box;"), v("circle(44%) margin-box", "clip-path: circle(44%) margin-box;"), v("circle(44%) fill-box", "clip-path: circle(44%) fill-box;"), v("circle(44%) stroke-box", "clip-path: circle(44%) stroke-box;"), v("circle(44%) view-box", "clip-path: circle(44%) view-box;"), v("circle(44%)", "clip-path: circle(44%);"), v("ellipse(48% 32%) content-box", "clip-path: ellipse(48% 32%) content-box;"), v("ellipse(48% 32%) padding-box", "clip-path: ellipse(48% 32%) padding-box;"), v("ellipse(48% 32%) border-box", "clip-path: ellipse(48% 32%) border-box;"), v("ellipse(48% 32%) margin-box", "clip-path: ellipse(48% 32%) margin-box;"), v("ellipse(48% 32%) fill-box", "clip-path: ellipse(48% 32%) fill-box;"), v("ellipse(48% 32%) stroke-box", "clip-path: ellipse(48% 32%) stroke-box;"), v("ellipse(48% 32%) view-box", "clip-path: ellipse(48% 32%) view-box;"), v("ellipse(48% 32%)", "clip-path: ellipse(48% 32%);"), v("inset(14% round 14px) content-box", "clip-path: inset(14% round 14px) content-box;"), v("inset(14% round 14px) padding-box", "clip-path: inset(14% round 14px) padding-box;"), v("inset(14% round 14px) border-box", "clip-path: inset(14% round 14px) border-box;"), v("inset(14% round 14px) margin-box", "clip-path: inset(14% round 14px) margin-box;"), v("inset(14% round 14px) fill-box", "clip-path: inset(14% round 14px) fill-box;"), v("inset(14% round 14px) stroke-box", "clip-path: inset(14% round 14px) stroke-box;"), v("inset(14% round 14px) view-box", "clip-path: inset(14% round 14px) view-box;"), v("inset(14% round 14px)", "clip-path: inset(14% round 14px);"), v("polygon(50% 4%, 96% 96%, 4% 96%) content-box", "clip-path: polygon(50% 4%, 96% 96%, 4% 96%) content-box;"), v("polygon(50% 4%, 96% 96%, 4% 96%) padding-box", "clip-path: polygon(50% 4%, 96% 96%, 4% 96%) padding-box;"), v("polygon(50% 4%, 96% 96%, 4% 96%) border-box", "clip-path: polygon(50% 4%, 96% 96%, 4% 96%) border-box;"), v("polygon(50% 4%, 96% 96%, 4% 96%) margin-box", "clip-path: polygon(50% 4%, 96% 96%, 4% 96%) margin-box;"), v("polygon(50% 4%, 96% 96%, 4% 96%) fill-box", "clip-path: polygon(50% 4%, 96% 96%, 4% 96%) fill-box;"), v("polygon(50% 4%, 96% 96%, 4% 96%) stroke-box", "clip-path: polygon(50% 4%, 96% 96%, 4% 96%) stroke-box;"), v("polygon(50% 4%, 96% 96%, 4% 96%) view-box", "clip-path: polygon(50% 4%, 96% 96%, 4% 96%) view-box;"), v("polygon(50% 4%, 96% 96%, 4% 96%)", "clip-path: polygon(50% 4%, 96% 96%, 4% 96%);"), v("content-box circle(44%)", "clip-path: content-box circle(44%);"), v("content-box ellipse(48% 32%)", "clip-path: content-box ellipse(48% 32%);"), v("content-box inset(14% round 14px)", "clip-path: content-box inset(14% round 14px);"), v("content-box polygon(50% 4%, 96% 96%, 4% 96%)", "clip-path: content-box polygon(50% 4%, 96% 96%, 4% 96%);"), v("content-box", "clip-path: content-box;"), v("padding-box circle(44%)", "clip-path: padding-box circle(44%);"), v("padding-box ellipse(48% 32%)", "clip-path: padding-box ellipse(48% 32%);"), v("padding-box inset(14% round 14px)", "clip-path: padding-box inset(14% round 14px);"), v("padding-box polygon(50% 4%, 96% 96%, 4% 96%)", "clip-path: padding-box polygon(50% 4%, 96% 96%, 4% 96%);"), v("padding-box", "clip-path: padding-box;"), v("border-box circle(44%)", "clip-path: border-box circle(44%);"), v("border-box ellipse(48% 32%)", "clip-path: border-box ellipse(48% 32%);"), v("border-box inset(14% round 14px)", "clip-path: border-box inset(14% round 14px);"), v("border-box polygon(50% 4%, 96% 96%, 4% 96%)", "clip-path: border-box polygon(50% 4%, 96% 96%, 4% 96%);"), v("border-box", "clip-path: border-box;"), v("margin-box circle(44%)", "clip-path: margin-box circle(44%);"), v("margin-box ellipse(48% 32%)", "clip-path: margin-box ellipse(48% 32%);"), ], }, { number: 288, name: "clip-rule", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eclip-rule\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property determines, when parts of the path overlap other parts, which pixels in a mask's box are inside the clipping shape defined by a \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/clip-path\"\u003eclip path\u003c/a\u003e and which are outside.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"nonzero\" | \"evenodd\"", ebnf: "clip-rule =\n \"nonzero\" | \"evenodd\"", valueType: "keyword", defaultValue: "evenodd", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("nonzero", "clip-rule: nonzero;"), v("evenodd", "clip-rule: evenodd;"), ], }, { number: 289, name: "mask", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emask\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e hides an element (partially or fully) by masking or clipping a specified area of the image. It is a shorthand for all the \u003ca href=\"#constituent_properties\"\u003e\u003ccode\u003emask-*\u003c/code\u003e\u003c/a\u003e properties. The property accepts one or more comma-separated values, where each value corresponds to a \u003ca href=\"#mask-layer\"\u003e\u003ccode\u003e\u0026lt;mask-layer\u0026gt;\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "MaskLayerType , { \",\" , MaskLayerType }", ebnf: "mask =\n MaskLayerType , { \",\" , MaskLayerType }", valueType: "length", defaultValue: "url(assets/photo.jpg) left/ 24px repeat-x content-box content-box add luminance", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cresolution\u003e", samples: ["96dpi", "2x", "300dpi"] }, { type: "\u003cstring\u003e", samples: ["\"Specimen\"", "\"Aa\""] }, { type: "ConicGradientFn", samples: ["conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c)"] }, { type: "LinearGradientFn", samples: ["linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)"] }, { type: "MaskUrlType", samples: ["url(assets/mask-shape.svg)"] }, { type: "RadialGradientFn", samples: ["radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)"] }, { type: "RepeatingConicGradientFn", samples: ["repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg)"] }, { type: "RepeatingLinearGradientFn", samples: ["repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)"] }, { type: "RepeatingRadialGradientFn", samples: ["repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px)"] }, { type: "UrlType", samples: ["url(assets/photo.jpg)"] }], values: [ v("url(assets/photo.jpg) left/ 24px repeat-x content-box content-box add alpha", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box content-box add alpha;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box content-box add luminance", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box content-box add luminance;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box content-box add match-source", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box content-box add match-source;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box content-box add", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box content-box add;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box content-box subtract alpha", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box content-box subtract alpha;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box content-box subtract luminance", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box content-box subtract luminance;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box content-box subtract match-source", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box content-box subtract match-source;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box content-box subtract", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box content-box subtract;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box content-box intersect alpha", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box content-box intersect alpha;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box content-box intersect luminance", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box content-box intersect luminance;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box content-box intersect match-source", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box content-box intersect match-source;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box content-box intersect", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box content-box intersect;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box content-box exclude alpha", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box content-box exclude alpha;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box content-box exclude luminance", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box content-box exclude luminance;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box content-box exclude match-source", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box content-box exclude match-source;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box content-box exclude", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box content-box exclude;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box content-box alpha", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box content-box alpha;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box content-box luminance", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box content-box luminance;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box content-box match-source", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box content-box match-source;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box content-box", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box content-box;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box add alpha", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box add alpha;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box add luminance", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box add luminance;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box add match-source", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box add match-source;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box add", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box add;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box subtract alpha", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box subtract alpha;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box subtract luminance", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box subtract luminance;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box subtract match-source", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box subtract match-source;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box subtract", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box subtract;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box intersect alpha", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box intersect alpha;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box intersect luminance", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box intersect luminance;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box intersect match-source", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box intersect match-source;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box intersect", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box intersect;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box exclude alpha", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box exclude alpha;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box exclude luminance", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box exclude luminance;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box exclude match-source", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box exclude match-source;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box exclude", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box exclude;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box alpha", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box alpha;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box luminance", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box luminance;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box match-source", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box match-source;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box padding-box;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box border-box add alpha", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box border-box add alpha;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box border-box add luminance", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box border-box add luminance;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box border-box add match-source", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box border-box add match-source;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box border-box add", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box border-box add;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box border-box subtract alpha", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box border-box subtract alpha;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box border-box subtract luminance", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box border-box subtract luminance;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box border-box subtract match-source", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box border-box subtract match-source;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box border-box subtract", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box border-box subtract;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box border-box intersect alpha", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box border-box intersect alpha;"), v("url(assets/photo.jpg) left/ 24px repeat-x content-box border-box intersect luminance", "mask: url(assets/photo.jpg) left/ 24px repeat-x content-box border-box intersect luminance;"), ], }, { number: 290, name: "mask-border", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emask-border\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e lets you create a mask along the edge of an element's border.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "[ MaskBorderSourceProp ] , [ MaskBorderSliceProp , [ \"/\" , [ MaskBorderWidthProp ] , [ \"/\" , MaskBorderOutsetProp ] ] ] , [ MaskBorderRepeatProp ] , [ MaskBorderModeProp ]", ebnf: "mask-border =\n [ MaskBorderSourceProp ] , [ MaskBorderSliceProp , [ \"/\" , [ MaskBorderWidthProp ] , [ \"/\" , MaskBorderOutsetProp ] ] ] , [ MaskBorderRepeatProp ] , [ MaskBorderModeProp ]", valueType: "length", defaultValue: "url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px stretch alpha", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cresolution\u003e", samples: ["96dpi", "2x", "300dpi"] }, { type: "\u003cstring\u003e", samples: ["\"Specimen\"", "\"Aa\""] }, { type: "BorderImageOutsetList", samples: ["4px 8px 2px 6px", "1 2 3 0.5", "10px", "2 5", "0"] }, { type: "BorderImageSliceList", samples: ["30% 10% 20% 5%", "0.5 3 1 0.75", "33%", "2 4 6 8", "1 2 3"] }, { type: "BorderImageWidthList", samples: ["4px 8px 2px 6px", "2 1 3 auto", "10px", "30% 10% 20% 5%", "1 4"] }, { type: "ConicGradientFn", samples: ["conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c)"] }, { type: "LinearGradientFn", samples: ["linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)"] }, { type: "RadialGradientFn", samples: ["radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)"] }, { type: "RepeatingConicGradientFn", samples: ["repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg)"] }, { type: "RepeatingLinearGradientFn", samples: ["repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)"] }, { type: "RepeatingRadialGradientFn", samples: ["repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px)"] }, { type: "UrlType", samples: ["url(assets/photo.jpg)"] }], values: [ v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px stretch luminance", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px stretch luminance;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px stretch alpha", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px stretch alpha;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px stretch", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px stretch;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px repeat luminance", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px repeat luminance;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px repeat alpha", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px repeat alpha;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px repeat", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px repeat;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px round luminance", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px round luminance;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px round alpha", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px round alpha;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px round", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px round;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px space luminance", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px space luminance;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px space alpha", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px space alpha;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px space", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px space;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px luminance", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px luminance;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px alpha", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px alpha;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 4px 8px 2px 6px;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 stretch luminance", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 stretch luminance;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 stretch alpha", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 stretch alpha;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 stretch", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 stretch;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 repeat luminance", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 repeat luminance;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 repeat alpha", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 repeat alpha;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 repeat", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 repeat;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 round luminance", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 round luminance;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 round alpha", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 round alpha;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 round", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 round;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 space luminance", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 space luminance;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 space alpha", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 space alpha;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 space", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 space;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 luminance", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 luminance;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 alpha", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5 alpha;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 1 2 3 0.5;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px stretch luminance", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px stretch luminance;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px stretch alpha", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px stretch alpha;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px stretch", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px stretch;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px repeat luminance", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px repeat luminance;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px repeat alpha", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px repeat alpha;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px repeat", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px repeat;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px round luminance", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px round luminance;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px round alpha", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px round alpha;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px round", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px round;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px space luminance", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px space luminance;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px space alpha", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px space alpha;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px space", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px space;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px luminance", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px luminance;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px alpha", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px alpha;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 10px;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 2 5 stretch luminance", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 2 5 stretch luminance;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 2 5 stretch alpha", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 2 5 stretch alpha;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 2 5 stretch", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 2 5 stretch;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 2 5 repeat luminance", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 2 5 repeat luminance;"), v("url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 2 5 repeat alpha", "mask-border: url(assets/photo.jpg) 30% 10% 20% 5% fill/ 4px 8px 2px 6px/ 2 5 repeat alpha;"), ], }, { number: 291, name: "mask-border-mode", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emask-border-mode\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the blending mode used in a \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/mask-border\"\u003emask border\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"luminance\" | \"alpha\"", ebnf: "mask-border-mode =\n \"luminance\" | \"alpha\"", valueType: "keyword", defaultValue: "alpha", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("luminance", "mask-border-mode: luminance;"), v("alpha", "mask-border-mode: alpha;"), ], }, { number: 292, name: "mask-border-outset", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emask-border-outset\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the distance by which an element's \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/mask-border\"\u003emask border\u003c/a\u003e is set out from its border box.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BorderImageOutsetProp", ebnf: "mask-border-outset =\n BorderImageOutsetProp", valueType: "keyword", defaultValue: "1 2 3 0.5", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "BorderImageOutsetList", samples: ["4px 8px 2px 6px", "1 2 3 0.5", "10px", "2 5", "0"] }], values: [ v("4px 8px 2px 6px", "mask-border-outset: 4px 8px 2px 6px;"), v("1 2 3 0.5", "mask-border-outset: 1 2 3 0.5;"), v("10px", "mask-border-outset: 10px;"), v("2 5", "mask-border-outset: 2 5;"), v("0", "mask-border-outset: 0;"), ], }, { number: 293, name: "mask-border-repeat", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emask-border-repeat\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies how the images for the sides and the middle part of the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/mask-border\"\u003emask border image\u003c/a\u003e are scaled and tiled.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BorderImageRepeatProp", ebnf: "mask-border-repeat =\n BorderImageRepeatProp", valueType: "keyword", defaultValue: "repeat", related: [], provenance: "pure", truncated: false, trueCount: 4, shown: 4, assists: [], values: [ v("stretch", "mask-border-repeat: stretch;"), v("repeat", "mask-border-repeat: repeat;"), v("round", "mask-border-repeat: round;"), v("space", "mask-border-repeat: space;"), ], }, { number: 294, name: "mask-border-slice", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emask-border-slice\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property divides the image set by \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/mask-border-source\"\u003e\u003ccode\u003emask-border-source\u003c/code\u003e\u003c/a\u003e into regions. These regions are used to form the components of an element's \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/mask-border\"\u003emask border\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BorderImageSliceProp", ebnf: "mask-border-slice =\n BorderImageSliceProp", valueType: "keyword", defaultValue: "30% 10% 20% 5%", related: [], provenance: "assisted", truncated: false, trueCount: 10, shown: 10, assists: [{ type: "BorderImageSliceList", samples: ["30% 10% 20% 5%", "0.5 3 1 0.75", "33%", "2 4 6 8", "1 2 3"] }], values: [ v("30% 10% 20% 5% fill", "mask-border-slice: 30% 10% 20% 5% fill;"), v("30% 10% 20% 5%", "mask-border-slice: 30% 10% 20% 5%;"), v("0.5 3 1 0.75 fill", "mask-border-slice: 0.5 3 1 0.75 fill;"), v("0.5 3 1 0.75", "mask-border-slice: 0.5 3 1 0.75;"), v("33% fill", "mask-border-slice: 33% fill;"), v("33%", "mask-border-slice: 33%;"), v("2 4 6 8 fill", "mask-border-slice: 2 4 6 8 fill;"), v("2 4 6 8", "mask-border-slice: 2 4 6 8;"), v("1 2 3 fill", "mask-border-slice: 1 2 3 fill;"), v("1 2 3", "mask-border-slice: 1 2 3;"), ], }, { number: 295, name: "mask-border-source", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emask-border-source\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the source image used to create an element's \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/mask-border\"\u003emask border\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BorderImageSourceProp", ebnf: "mask-border-source =\n BorderImageSourceProp", valueType: "function", defaultValue: "image(ltr url(assets/photo.jpg))", related: [], provenance: "assisted", truncated: false, trueCount: 13, shown: 13, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cresolution\u003e", samples: ["96dpi", "2x", "300dpi"] }, { type: "\u003cstring\u003e", samples: ["\"Specimen\"", "\"Aa\""] }, { type: "ConicGradientFn", samples: ["conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c)"] }, { type: "LinearGradientFn", samples: ["linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)"] }, { type: "RadialGradientFn", samples: ["radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)"] }, { type: "RepeatingConicGradientFn", samples: ["repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg)"] }, { type: "RepeatingLinearGradientFn", samples: ["repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)"] }, { type: "RepeatingRadialGradientFn", samples: ["repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px)"] }, { type: "UrlType", samples: ["url(assets/photo.jpg)"] }], values: [ v("url(assets/photo.jpg)", "mask-border-source: url(assets/photo.jpg);"), v("image(ltr url(assets/photo.jpg))", "mask-border-source: image(ltr url(assets/photo.jpg));"), v("image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\"))", "mask-border-source: image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\"));"), v("cross-fade(url(assets/photo.jpg) 30%)", "mask-border-source: cross-fade(url(assets/photo.jpg) 30%);"), v("element(#alpha)", "mask-border-source: element(#alpha);"), v("linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)", "mask-border-source: linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0);"), v("repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)", "mask-border-source: repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px);"), v("radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)", "mask-border-source: radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0);"), v("repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px)", "mask-border-source: repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px);"), v("conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c)", "mask-border-source: conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c);"), v("repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg)", "mask-border-source: repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg);"), v("light-dark(url(assets/photo.jpg), url(assets/photo.jpg))", "mask-border-source: light-dark(url(assets/photo.jpg), url(assets/photo.jpg));"), v("none", "mask-border-source: none;"), ], }, { number: 296, name: "mask-border-width", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emask-border-width\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the width of an element's \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/mask-border\"\u003emask border\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BorderImageWidthProp", ebnf: "mask-border-width =\n BorderImageWidthProp", valueType: "keyword", defaultValue: "2 1 3 auto", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "BorderImageWidthList", samples: ["4px 8px 2px 6px", "2 1 3 auto", "10px", "30% 10% 20% 5%", "1 4"] }], values: [ v("4px 8px 2px 6px", "mask-border-width: 4px 8px 2px 6px;"), v("2 1 3 auto", "mask-border-width: 2 1 3 auto;"), v("10px", "mask-border-width: 10px;"), v("30% 10% 20% 5%", "mask-border-width: 30% 10% 20% 5%;"), v("1 4", "mask-border-width: 1 4;"), ], }, { number: 297, name: "mask-clip", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emask-clip\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property determines the area which is affected by a mask. The painted content of an element must be restricted to this area.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "MaskClipPropItem , { \",\" , MaskClipPropItem }", ebnf: "mask-clip =\n MaskClipPropItem , { \",\" , MaskClipPropItem }", valueType: "keyword", defaultValue: "padding-box", related: [], provenance: "pure", truncated: false, trueCount: 7, shown: 7, assists: [], values: [ v("content-box", "mask-clip: content-box;"), v("padding-box", "mask-clip: padding-box;"), v("border-box", "mask-clip: border-box;"), v("fill-box", "mask-clip: fill-box;"), v("stroke-box", "mask-clip: stroke-box;"), v("view-box", "mask-clip: view-box;"), v("no-clip", "mask-clip: no-clip;"), ], }, { number: 298, name: "mask-composite", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emask-composite\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property represents a compositing operation used on the current mask layer with the mask layers below it.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "CompositingOperatorType , { \",\" , CompositingOperatorType }", ebnf: "mask-composite =\n CompositingOperatorType , { \",\" , CompositingOperatorType }", valueType: "keyword", defaultValue: "subtract", related: [], provenance: "pure", truncated: false, trueCount: 4, shown: 4, assists: [], values: [ v("add", "mask-composite: add;"), v("subtract", "mask-composite: subtract;"), v("intersect", "mask-composite: intersect;"), v("exclude", "mask-composite: exclude;"), ], }, { number: 299, name: "mask-image", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emask-image\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the image that is used as the mask layer for an element, hiding sections of the element on which the masking image is set based on the alpha channel of the mask image and, depending on the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/mask-mode\"\u003e\u003ccode\u003emask-mode\u003c/code\u003e\u003c/a\u003e property value, the luminance of the mask image's colors.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "MaskReferenceType , { \",\" , MaskReferenceType }", ebnf: "mask-image =\n MaskReferenceType , { \",\" , MaskReferenceType }", valueType: "function", defaultValue: "image(ltr url(assets/photo.jpg))", related: [], provenance: "assisted", truncated: false, trueCount: 14, shown: 14, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cresolution\u003e", samples: ["96dpi", "2x", "300dpi"] }, { type: "\u003cstring\u003e", samples: ["\"Specimen\"", "\"Aa\""] }, { type: "ConicGradientFn", samples: ["conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c)"] }, { type: "LinearGradientFn", samples: ["linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)"] }, { type: "MaskUrlType", samples: ["url(assets/mask-shape.svg)"] }, { type: "RadialGradientFn", samples: ["radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)"] }, { type: "RepeatingConicGradientFn", samples: ["repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg)"] }, { type: "RepeatingLinearGradientFn", samples: ["repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)"] }, { type: "RepeatingRadialGradientFn", samples: ["repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px)"] }, { type: "UrlType", samples: ["url(assets/photo.jpg)"] }], values: [ v("url(assets/photo.jpg)", "mask-image: url(assets/photo.jpg);"), v("image(ltr url(assets/photo.jpg))", "mask-image: image(ltr url(assets/photo.jpg));"), v("image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\"))", "mask-image: image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\"));"), v("cross-fade(url(assets/photo.jpg) 30%)", "mask-image: cross-fade(url(assets/photo.jpg) 30%);"), v("element(#alpha)", "mask-image: element(#alpha);"), v("linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)", "mask-image: linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0);"), v("repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)", "mask-image: repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px);"), v("radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)", "mask-image: radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0);"), v("repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px)", "mask-image: repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px);"), v("conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c)", "mask-image: conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c);"), v("repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg)", "mask-image: repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg);"), v("light-dark(url(assets/photo.jpg), url(assets/photo.jpg))", "mask-image: light-dark(url(assets/photo.jpg), url(assets/photo.jpg));"), v("url(assets/mask-shape.svg)", "mask-image: url(assets/mask-shape.svg);"), v("none", "mask-image: none;"), ], }, { number: 300, name: "mask-mode", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emask-mode\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property is set on the element being masked. It sets whether the mask reference defined by the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/mask-image\"\u003e\u003ccode\u003emask-image\u003c/code\u003e\u003c/a\u003e is treated as a luminance or alpha mask.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "MaskingModeType , { \",\" , MaskingModeType }", ebnf: "mask-mode =\n MaskingModeType , { \",\" , MaskingModeType }", valueType: "keyword", defaultValue: "luminance", related: [], provenance: "pure", truncated: false, trueCount: 3, shown: 3, assists: [], values: [ v("alpha", "mask-mode: alpha;"), v("luminance", "mask-mode: luminance;"), v("match-source", "mask-mode: match-source;"), ], }, { number: 301, name: "mask-origin", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emask-origin\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the origin of a mask. This property determines the mask positioning area: the area within which a mask image is positioned. HTML elements can have masks contained within their content border box, padding box, or content box, whereas SVG elements (which don't have the associated CSS layout boxes) can have masks contained inside their fill, stroke, or view box. For elements rendered as multiple boxes, such as a \u003ca href=\"/en-US/docs/Web/HTML/Reference/Elements/span\"\u003e\u003ccode\u003e\u0026lt;span\u0026gt;\u003c/code\u003e\u003c/a\u003e of text that spans more than one line, the \u003ccode\u003emask-origin\u003c/code\u003e property specifies which boxes the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/box-decoration-break\"\u003e\u003ccode\u003ebox-decoration-break\u003c/code\u003e\u003c/a\u003e property operates on to determine the mask positioning area.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "CoordBoxType , { \",\" , CoordBoxType }", ebnf: "mask-origin =\n CoordBoxType , { \",\" , CoordBoxType }", valueType: "keyword", defaultValue: "padding-box", related: [], provenance: "pure", truncated: false, trueCount: 6, shown: 6, assists: [], values: [ v("content-box", "mask-origin: content-box;"), v("padding-box", "mask-origin: padding-box;"), v("border-box", "mask-origin: border-box;"), v("fill-box", "mask-origin: fill-box;"), v("stroke-box", "mask-origin: stroke-box;"), v("view-box", "mask-origin: view-box;"), ], }, { number: 302, name: "mask-position", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emask-position\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the initial position, relative to the mask position layer set by \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/mask-origin\"\u003e\u003ccode\u003emask-origin\u003c/code\u003e\u003c/a\u003e, for each defined mask image.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "PositionType , { \",\" , PositionType }", ebnf: "mask-position =\n PositionType , { \",\" , PositionType }", valueType: "keyword", defaultValue: "center", related: [], provenance: "assisted", truncated: true, trueCount: 139, shown: 50, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("left", "mask-position: left;"), v("center", "mask-position: center;"), v("right", "mask-position: right;"), v("top", "mask-position: top;"), v("bottom", "mask-position: bottom;"), v("x-start", "mask-position: x-start;"), v("x-end", "mask-position: x-end;"), v("y-start", "mask-position: y-start;"), v("y-end", "mask-position: y-end;"), v("block-start", "mask-position: block-start;"), v("block-end", "mask-position: block-end;"), v("inline-start", "mask-position: inline-start;"), v("inline-end", "mask-position: inline-end;"), v("24px", "mask-position: 24px;"), v("48px", "mask-position: 48px;"), v("8px", "mask-position: 8px;"), v("16px", "mask-position: 16px;"), v("64px", "mask-position: 64px;"), v("50%", "mask-position: 50%;"), v("80%", "mask-position: 80%;"), v("30%", "mask-position: 30%;"), v("65%", "mask-position: 65%;"), v("15%", "mask-position: 15%;"), v("100%", "mask-position: 100%;"), v("calc(24px)", "mask-position: calc(24px);"), v("clamp(24px, 2em, 48px)", "mask-position: clamp(24px, 2em, 48px);"), v("min(24px)", "mask-position: min(24px);"), v("max(24px)", "mask-position: max(24px);"), v("round(nearest, 24px, 2em)", "mask-position: round(nearest, 24px, 2em);"), v("abs(24px)", "mask-position: abs(24px);"), v("var(--my-var, 48px)", "mask-position: var(--my-var, 48px);"), v("env(my-ident, 48px)", "mask-position: env(my-ident, 48px);"), v("left top", "mask-position: left top;"), v("left center", "mask-position: left center;"), v("left bottom", "mask-position: left bottom;"), v("left y-start", "mask-position: left y-start;"), v("left y-end", "mask-position: left y-end;"), v("center top", "mask-position: center top;"), v("center center", "mask-position: center center;"), v("center bottom", "mask-position: center bottom;"), v("center y-start", "mask-position: center y-start;"), v("center y-end", "mask-position: center y-end;"), v("right top", "mask-position: right top;"), v("right center", "mask-position: right center;"), v("right bottom", "mask-position: right bottom;"), v("right y-start", "mask-position: right y-start;"), v("right y-end", "mask-position: right y-end;"), v("x-start top", "mask-position: x-start top;"), v("x-start center", "mask-position: x-start center;"), v("x-start bottom", "mask-position: x-start bottom;"), ], }, { number: 303, name: "mask-repeat", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emask-repeat\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets how mask images are repeated. A mask image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "RepeatStyleType , { \",\" , RepeatStyleType }", ebnf: "mask-repeat =\n RepeatStyleType , { \",\" , RepeatStyleType }", valueType: "keyword", defaultValue: "repeat-y", related: [], provenance: "pure", truncated: false, trueCount: 8, shown: 8, assists: [], values: [ v("repeat-x", "mask-repeat: repeat-x;"), v("repeat-y", "mask-repeat: repeat-y;"), v("repeat-block", "mask-repeat: repeat-block;"), v("repeat-inline", "mask-repeat: repeat-inline;"), v("repeat", "mask-repeat: repeat;"), v("space", "mask-repeat: space;"), v("round", "mask-repeat: round;"), v("no-repeat", "mask-repeat: no-repeat;"), ], }, { number: 304, name: "mask-size", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emask-size\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the sizes of specified mask images. Mask image sizes can be fully or partially constrained to preserve their \u003ca href=\"/en-US/docs/Glossary/Aspect_ratio\"\u003eintrinsic aspect ratios\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "BgSizeType , { \",\" , BgSizeType }", ebnf: "mask-size =\n BgSizeType , { \",\" , BgSizeType }", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 21, shown: 21, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "mask-size: 24px;"), v("48px", "mask-size: 48px;"), v("8px", "mask-size: 8px;"), v("16px", "mask-size: 16px;"), v("64px", "mask-size: 64px;"), v("50%", "mask-size: 50%;"), v("80%", "mask-size: 80%;"), v("30%", "mask-size: 30%;"), v("65%", "mask-size: 65%;"), v("15%", "mask-size: 15%;"), v("100%", "mask-size: 100%;"), v("calc(24px)", "mask-size: calc(24px);"), v("clamp(24px, 2em, 48px)", "mask-size: clamp(24px, 2em, 48px);"), v("min(24px)", "mask-size: min(24px);"), v("max(24px)", "mask-size: max(24px);"), v("round(nearest, 24px, 2em)", "mask-size: round(nearest, 24px, 2em);"), v("abs(24px)", "mask-size: abs(24px);"), v("env(my-ident, 48px)", "mask-size: env(my-ident, 48px);"), v("auto", "mask-size: auto;"), v("cover", "mask-size: cover;"), v("contain", "mask-size: contain;"), ], }, { number: 305, name: "mask-type", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emask-type\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property applies to the SVG \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/mask\"\u003e\u003ccode\u003e\u0026lt;mask\u0026gt;\u003c/code\u003e\u003c/a\u003e element. It defines whether to use the \u003cem\u003eluminance\u003c/em\u003e (brightness) or \u003cem\u003ealpha\u003c/em\u003e (transparency) content of the mask. This property may be overridden by the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/mask-mode\"\u003e\u003ccode\u003emask-mode\u003c/code\u003e\u003c/a\u003e property. The \u003ccode\u003emask-type\u003c/code\u003e property has no effect on image or gradient masks.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"luminance\" | \"alpha\"", ebnf: "mask-type =\n \"luminance\" | \"alpha\"", valueType: "keyword", defaultValue: "alpha", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("luminance", "mask-type: luminance;"), v("alpha", "mask-type: alpha;"), ], }, ], }, { id: "transforms", sigil: "17", title: "Transforms", blurb: "Re-map an element's coordinate space in 2D and 3D.", demo: "transform3d", sampleKind: "box3d", group: "families", focus: true, gallery: false, count: 10, properties: [ { number: 306, name: "backface-visibility", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebackface-visibility\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets whether the back face of an element is visible when turned towards the user.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"visible\" | \"hidden\"", ebnf: "backface-visibility =\n \"visible\" | \"hidden\"", valueType: "keyword", defaultValue: "hidden", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("visible", "backface-visibility: visible;"), v("hidden", "backface-visibility: hidden;"), ], }, { number: 307, name: "perspective", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eperspective\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | NonNegativeLengthType", ebnf: "perspective =\n \"none\" | NonNegativeLengthType", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 6, shown: 6, assists: [{ type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("none", "perspective: none;"), v("24px", "perspective: 24px;"), v("48px", "perspective: 48px;"), v("8px", "perspective: 8px;"), v("16px", "perspective: 16px;"), v("64px", "perspective: 64px;"), ], }, { number: 308, name: "perspective-origin", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eperspective-origin\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property determines the position at which the viewer is looking. It is used as the \u003cem\u003evanishing point\u003c/em\u003e by the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/perspective\"\u003e\u003ccode\u003eperspective\u003c/code\u003e\u003c/a\u003e property.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "PositionType", ebnf: "perspective-origin =\n PositionType", valueType: "keyword", defaultValue: "center", related: [], provenance: "assisted", truncated: true, trueCount: 139, shown: 50, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("left", "perspective-origin: left;"), v("center", "perspective-origin: center;"), v("right", "perspective-origin: right;"), v("top", "perspective-origin: top;"), v("bottom", "perspective-origin: bottom;"), v("x-start", "perspective-origin: x-start;"), v("x-end", "perspective-origin: x-end;"), v("y-start", "perspective-origin: y-start;"), v("y-end", "perspective-origin: y-end;"), v("block-start", "perspective-origin: block-start;"), v("block-end", "perspective-origin: block-end;"), v("inline-start", "perspective-origin: inline-start;"), v("inline-end", "perspective-origin: inline-end;"), v("24px", "perspective-origin: 24px;"), v("48px", "perspective-origin: 48px;"), v("8px", "perspective-origin: 8px;"), v("16px", "perspective-origin: 16px;"), v("64px", "perspective-origin: 64px;"), v("50%", "perspective-origin: 50%;"), v("80%", "perspective-origin: 80%;"), v("30%", "perspective-origin: 30%;"), v("65%", "perspective-origin: 65%;"), v("15%", "perspective-origin: 15%;"), v("100%", "perspective-origin: 100%;"), v("calc(24px)", "perspective-origin: calc(24px);"), v("clamp(24px, 2em, 48px)", "perspective-origin: clamp(24px, 2em, 48px);"), v("min(24px)", "perspective-origin: min(24px);"), v("max(24px)", "perspective-origin: max(24px);"), v("round(nearest, 24px, 2em)", "perspective-origin: round(nearest, 24px, 2em);"), v("abs(24px)", "perspective-origin: abs(24px);"), v("var(--my-var, 48px)", "perspective-origin: var(--my-var, 48px);"), v("env(my-ident, 48px)", "perspective-origin: env(my-ident, 48px);"), v("left top", "perspective-origin: left top;"), v("left center", "perspective-origin: left center;"), v("left bottom", "perspective-origin: left bottom;"), v("left y-start", "perspective-origin: left y-start;"), v("left y-end", "perspective-origin: left y-end;"), v("center top", "perspective-origin: center top;"), v("center center", "perspective-origin: center center;"), v("center bottom", "perspective-origin: center bottom;"), v("center y-start", "perspective-origin: center y-start;"), v("center y-end", "perspective-origin: center y-end;"), v("right top", "perspective-origin: right top;"), v("right center", "perspective-origin: right center;"), v("right bottom", "perspective-origin: right bottom;"), v("right y-start", "perspective-origin: right y-start;"), v("right y-end", "perspective-origin: right y-end;"), v("x-start top", "perspective-origin: x-start top;"), v("x-start center", "perspective-origin: x-start center;"), v("x-start bottom", "perspective-origin: x-start bottom;"), ], }, { number: 309, name: "rotate", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003erotate\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property allows you to specify rotation transforms individually and independently of the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/transform\"\u003e\u003ccode\u003etransform\u003c/code\u003e\u003c/a\u003e property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the \u003ccode\u003etransform\u003c/code\u003e property.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | AngleType | ( ( \"x\" | \"y\" | \"z\" | RotateAxisVectorType ) , AngleType )", ebnf: "rotate =\n \"none\" | AngleType | ( ( \"x\" | \"y\" | \"z\" | RotateAxisVectorType ) , AngleType )", valueType: "angle", defaultValue: "45deg", related: [], provenance: "assisted", truncated: false, trueCount: 41, shown: 41, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "RotateAxisVectorType", samples: ["1 1 1", "1 0 0", "0 1 0", "1 1 0"] }], values: [ v("none", "rotate: none;"), v("45deg", "rotate: 45deg;"), v("135deg", "rotate: 135deg;"), v("250deg", "rotate: 250deg;"), v("320deg", "rotate: 320deg;"), v("90deg", "rotate: 90deg;"), v("x 45deg", "rotate: x 45deg;"), v("x 135deg", "rotate: x 135deg;"), v("x 250deg", "rotate: x 250deg;"), v("x 320deg", "rotate: x 320deg;"), v("x 90deg", "rotate: x 90deg;"), v("y 45deg", "rotate: y 45deg;"), v("y 135deg", "rotate: y 135deg;"), v("y 250deg", "rotate: y 250deg;"), v("y 320deg", "rotate: y 320deg;"), v("y 90deg", "rotate: y 90deg;"), v("z 45deg", "rotate: z 45deg;"), v("z 135deg", "rotate: z 135deg;"), v("z 250deg", "rotate: z 250deg;"), v("z 320deg", "rotate: z 320deg;"), v("z 90deg", "rotate: z 90deg;"), v("1 1 1 45deg", "rotate: 1 1 1 45deg;"), v("1 1 1 135deg", "rotate: 1 1 1 135deg;"), v("1 1 1 250deg", "rotate: 1 1 1 250deg;"), v("1 1 1 320deg", "rotate: 1 1 1 320deg;"), v("1 1 1 90deg", "rotate: 1 1 1 90deg;"), v("1 0 0 45deg", "rotate: 1 0 0 45deg;"), v("1 0 0 135deg", "rotate: 1 0 0 135deg;"), v("1 0 0 250deg", "rotate: 1 0 0 250deg;"), v("1 0 0 320deg", "rotate: 1 0 0 320deg;"), v("1 0 0 90deg", "rotate: 1 0 0 90deg;"), v("0 1 0 45deg", "rotate: 0 1 0 45deg;"), v("0 1 0 135deg", "rotate: 0 1 0 135deg;"), v("0 1 0 250deg", "rotate: 0 1 0 250deg;"), v("0 1 0 320deg", "rotate: 0 1 0 320deg;"), v("0 1 0 90deg", "rotate: 0 1 0 90deg;"), v("1 1 0 45deg", "rotate: 1 1 0 45deg;"), v("1 1 0 135deg", "rotate: 1 1 0 135deg;"), v("1 1 0 250deg", "rotate: 1 1 0 250deg;"), v("1 1 0 320deg", "rotate: 1 1 0 320deg;"), v("1 1 0 90deg", "rotate: 1 1 0 90deg;"), ], }, { number: 310, name: "scale", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003escale\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property allows you to specify scale transforms individually and independently of the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/transform\"\u003e\u003ccode\u003etransform\u003c/code\u003e\u003c/a\u003e property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the \u003ccode\u003etransform\u003c/code\u003e value.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | ScaleList", ebnf: "scale =\n \"none\" | ScaleList", valueType: "keyword", defaultValue: "2", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "ScaleList", samples: ["2", "2 0.5", "1.5 2 0.8", "150% 80%"] }], values: [ v("none", "scale: none;"), v("2", "scale: 2;"), v("2 0.5", "scale: 2 0.5;"), v("1.5 2 0.8", "scale: 1.5 2 0.8;"), v("150% 80%", "scale: 150% 80%;"), ], }, { number: 311, name: "transform", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etransform\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS \u003ca href=\"/en-US/docs/Web/CSS/Guides/Display/Visual_formatting_model\"\u003evisual formatting model\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "\u003cstrong\u003eWarning:\u003c/strong\u003e Only transformable elements can be \u003ccode\u003etransform\u003c/code\u003eed. That is, all elements whose layout is governed by the CSS box model except for: \u003ca href=\"/en-US/docs/Glossary/Inline-level_content\"\u003enon-replaced inline boxes\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/HTML/Reference/Elements/col\"\u003etable-column boxes\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/HTML/Reference/Elements/colgroup\"\u003etable-column-group boxes\u003c/a\u003e.", syntax: "\"none\" | TransformListType", ebnf: "transform =\n \"none\" | TransformListType", valueType: "keyword", defaultValue: "scale3d(2, 1.6, 2)", related: [], provenance: "assisted", truncated: false, trueCount: 22, shown: 22, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "ScaleFactorType", samples: ["2", "0.5", "1.6", "0.7"] }], values: [ v("none", "transform: none;"), v("scale3d(2, 1.6, 2)", "transform: scale3d(2, 1.6, 2);"), v("scale(2, 0.5)", "transform: scale(2, 0.5);"), v("scaleX(2)", "transform: scaleX(2);"), v("scaleY(2)", "transform: scaleY(2);"), v("scaleZ(2)", "transform: scaleZ(2);"), v("translate3d(24px, 8px, 64px)", "transform: translate3d(24px, 8px, 64px);"), v("translate(24px, 8px)", "transform: translate(24px, 8px);"), v("translateX(24px)", "transform: translateX(24px);"), v("translateY(24px)", "transform: translateY(24px);"), v("translateZ(24px)", "transform: translateZ(24px);"), v("rotate3d(1, 0.5, 2, 320deg)", "transform: rotate3d(1, 0.5, 2, 320deg);"), v("rotate(45deg)", "transform: rotate(45deg);"), v("rotateX(45deg)", "transform: rotateX(45deg);"), v("rotateY(45deg)", "transform: rotateY(45deg);"), v("rotateZ(45deg)", "transform: rotateZ(45deg);"), v("skew(45deg, 135deg)", "transform: skew(45deg, 135deg);"), v("skewX(45deg)", "transform: skewX(45deg);"), v("skewY(45deg)", "transform: skewY(45deg);"), v("matrix3d(1, 0.5, 2, 0.75, 0.25, 1, 0.5, 2, 0.75, 0.25, 1, 0.5, 2, 0.75, 0.25, 1)", "transform: matrix3d(1, 0.5, 2, 0.75, 0.25, 1, 0.5, 2, 0.75, 0.25, 1, 0.5, 2, 0.75, 0.25, 1);"), v("matrix(1, 0.5, 2, 0.75, 0.25, 1)", "transform: matrix(1, 0.5, 2, 0.75, 0.25, 1);"), v("perspective(24px)", "transform: perspective(24px);"), ], }, { number: 312, name: "transform-box", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etransform-box\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the layout box to which the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/transform\"\u003e\u003ccode\u003etransform\u003c/code\u003e\u003c/a\u003e, individual transform properties \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/translate\"\u003e\u003ccode\u003etranslate\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/scale\"\u003e\u003ccode\u003escale\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/rotate\"\u003e\u003ccode\u003erotate\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/transform-origin\"\u003e\u003ccode\u003etransform-origin\u003c/code\u003e\u003c/a\u003e properties relate.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"content-box\" | \"border-box\" | \"fill-box\" | \"stroke-box\" | \"view-box\"", ebnf: "transform-box =\n \"content-box\" | \"border-box\" | \"fill-box\" | \"stroke-box\" | \"view-box\"", valueType: "keyword", defaultValue: "border-box", related: [], provenance: "pure", truncated: false, trueCount: 5, shown: 5, assists: [], values: [ v("content-box", "transform-box: content-box;"), v("border-box", "transform-box: border-box;"), v("fill-box", "transform-box: fill-box;"), v("stroke-box", "transform-box: stroke-box;"), v("view-box", "transform-box: view-box;"), ], }, { number: 313, name: "transform-origin", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etransform-origin\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the origin for an element's transformations.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "( \"left\" | \"center\" | \"right\" | \"top\" | \"bottom\" | LengthPercentageType ) | ( \"left\" | \"center\" | \"right\" | LengthPercentageType ) , ( \"top\" | \"center\" | \"bottom\" | LengthPercentageType ) , [ LengthType ] | ( ( \"center\" | \"left\" | \"right\" ) , ( \"center\" | \"top\" | \"bottom\" ) ) , [ LengthType ]", ebnf: "transform-origin =\n ( \"left\" | \"center\" | \"right\" | \"top\" | \"bottom\" | LengthPercentageType ) | ( \"left\" | \"center\" | \"right\" | LengthPercentageType ) , ( \"top\" | \"center\" | \"bottom\" | LengthPercentageType ) , [ LengthType ] | ( ( \"center\" | \"left\" | \"right\" ) , ( \"center\" | \"top\" | \"bottom\" ) ) , [ LengthType ]", valueType: "length", defaultValue: "center", related: [], provenance: "assisted", truncated: true, trueCount: 202, shown: 50, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("left", "transform-origin: left;"), v("center", "transform-origin: center;"), v("right", "transform-origin: right;"), v("top", "transform-origin: top;"), v("bottom", "transform-origin: bottom;"), v("24px", "transform-origin: 24px;"), v("48px", "transform-origin: 48px;"), v("8px", "transform-origin: 8px;"), v("16px", "transform-origin: 16px;"), v("64px", "transform-origin: 64px;"), v("50%", "transform-origin: 50%;"), v("80%", "transform-origin: 80%;"), v("30%", "transform-origin: 30%;"), v("65%", "transform-origin: 65%;"), v("15%", "transform-origin: 15%;"), v("100%", "transform-origin: 100%;"), v("calc(24px)", "transform-origin: calc(24px);"), v("clamp(24px, 2em, 48px)", "transform-origin: clamp(24px, 2em, 48px);"), v("min(24px)", "transform-origin: min(24px);"), v("max(24px)", "transform-origin: max(24px);"), v("round(nearest, 24px, 2em)", "transform-origin: round(nearest, 24px, 2em);"), v("abs(24px)", "transform-origin: abs(24px);"), v("var(--my-var, 48px)", "transform-origin: var(--my-var, 48px);"), v("env(my-ident, 48px)", "transform-origin: env(my-ident, 48px);"), v("left top 24px", "transform-origin: left top 24px;"), v("left top 48px", "transform-origin: left top 48px;"), v("left top 8px", "transform-origin: left top 8px;"), v("left top 16px", "transform-origin: left top 16px;"), v("left top 64px", "transform-origin: left top 64px;"), v("left top", "transform-origin: left top;"), v("left center 24px", "transform-origin: left center 24px;"), v("left center 48px", "transform-origin: left center 48px;"), v("left center 8px", "transform-origin: left center 8px;"), v("left center 16px", "transform-origin: left center 16px;"), v("left center 64px", "transform-origin: left center 64px;"), v("left center", "transform-origin: left center;"), v("left bottom 24px", "transform-origin: left bottom 24px;"), v("left bottom 48px", "transform-origin: left bottom 48px;"), v("left bottom 8px", "transform-origin: left bottom 8px;"), v("left bottom 16px", "transform-origin: left bottom 16px;"), v("left bottom 64px", "transform-origin: left bottom 64px;"), v("left bottom", "transform-origin: left bottom;"), v("left 24px 24px", "transform-origin: left 24px 24px;"), v("left 24px 48px", "transform-origin: left 24px 48px;"), v("left 24px 8px", "transform-origin: left 24px 8px;"), v("left 24px 16px", "transform-origin: left 24px 16px;"), v("left 24px 64px", "transform-origin: left 24px 64px;"), v("left 24px", "transform-origin: left 24px;"), v("left 48px 24px", "transform-origin: left 48px 24px;"), v("left 48px 48px", "transform-origin: left 48px 48px;"), ], }, { number: 314, name: "transform-style", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etransform-style\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"flat\" | \"preserve-3d\"", ebnf: "transform-style =\n \"flat\" | \"preserve-3d\"", valueType: "keyword", defaultValue: "preserve-3d", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("flat", "transform-style: flat;"), v("preserve-3d", "transform-style: preserve-3d;"), ], }, { number: 315, name: "translate", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etranslate\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property allows you to specify translation transforms individually and independently of the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/transform\"\u003e\u003ccode\u003etransform\u003c/code\u003e\u003c/a\u003e property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the \u003ccode\u003etransform\u003c/code\u003e value.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | TranslateList", ebnf: "translate =\n \"none\" | TranslateList", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "TranslateList", samples: ["24px", "24px 12px", "40px 8px 16px", "10% 30%"] }], values: [ v("none", "translate: none;"), v("24px", "translate: 24px;"), v("24px 12px", "translate: 24px 12px;"), v("40px 8px 16px", "translate: 40px 8px 16px;"), v("10% 30%", "translate: 10% 30%;"), ], }, ], }, { id: "transitions", sigil: "18", title: "Transitions", blurb: "Interpolate property changes over time with easing.", demo: "generic", sampleKind: "box", group: "families", focus: false, gallery: false, count: 6, properties: [ { number: 316, name: "transition", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etransition\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property is a \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/transition-property\"\u003e\u003ccode\u003etransition-property\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/transition-duration\"\u003e\u003ccode\u003etransition-duration\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/transition-timing-function\"\u003e\u003ccode\u003etransition-timing-function\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/transition-delay\"\u003e\u003ccode\u003etransition-delay\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/transition-behavior\"\u003e\u003ccode\u003etransition-behavior\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "SingleTransitionType , { \",\" , SingleTransitionType }", ebnf: "transition =\n SingleTransitionType , { \",\" , SingleTransitionType }", valueType: "keyword", defaultValue: "opacity 0.4s", related: [], provenance: "assisted", truncated: false, trueCount: 30, shown: 30, assists: [{ type: "TransitionPropertyNameType", samples: ["opacity", "transform", "background-color", "width", "color"] }], values: [ v("all 0.4s", "transition: all 0.4s;"), v("opacity 0.4s", "transition: opacity 0.4s;"), v("transform 0.4s", "transition: transform 0.4s;"), v("background-color 0.4s", "transition: background-color 0.4s;"), v("width 0.4s", "transition: width 0.4s;"), v("color 0.4s", "transition: color 0.4s;"), v("all 0.4s ease-in-out", "transition: all 0.4s ease-in-out;"), v("opacity 0.4s ease-in-out", "transition: opacity 0.4s ease-in-out;"), v("transform 0.4s ease-in-out", "transition: transform 0.4s ease-in-out;"), v("background-color 0.4s ease-in-out", "transition: background-color 0.4s ease-in-out;"), v("width 0.4s ease-in-out", "transition: width 0.4s ease-in-out;"), v("color 0.4s ease-in-out", "transition: color 0.4s ease-in-out;"), v("all 0.6s linear 0.1s", "transition: all 0.6s linear 0.1s;"), v("opacity 0.6s linear 0.1s", "transition: opacity 0.6s linear 0.1s;"), v("transform 0.6s linear 0.1s", "transition: transform 0.6s linear 0.1s;"), v("background-color 0.6s linear 0.1s", "transition: background-color 0.6s linear 0.1s;"), v("width 0.6s linear 0.1s", "transition: width 0.6s linear 0.1s;"), v("color 0.6s linear 0.1s", "transition: color 0.6s linear 0.1s;"), v("all 0.4s ease 0.1s normal", "transition: all 0.4s ease 0.1s normal;"), v("all 0.4s ease 0.1s allow-discrete", "transition: all 0.4s ease 0.1s allow-discrete;"), v("opacity 0.4s ease 0.1s normal", "transition: opacity 0.4s ease 0.1s normal;"), v("opacity 0.4s ease 0.1s allow-discrete", "transition: opacity 0.4s ease 0.1s allow-discrete;"), v("transform 0.4s ease 0.1s normal", "transition: transform 0.4s ease 0.1s normal;"), v("transform 0.4s ease 0.1s allow-discrete", "transition: transform 0.4s ease 0.1s allow-discrete;"), v("background-color 0.4s ease 0.1s normal", "transition: background-color 0.4s ease 0.1s normal;"), v("background-color 0.4s ease 0.1s allow-discrete", "transition: background-color 0.4s ease 0.1s allow-discrete;"), v("width 0.4s ease 0.1s normal", "transition: width 0.4s ease 0.1s normal;"), v("width 0.4s ease 0.1s allow-discrete", "transition: width 0.4s ease 0.1s allow-discrete;"), v("color 0.4s ease 0.1s normal", "transition: color 0.4s ease 0.1s normal;"), v("color 0.4s ease 0.1s allow-discrete", "transition: color 0.4s ease 0.1s allow-discrete;"), ], }, { number: 317, name: "transition-behavior", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etransition-behavior\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies whether transitions will be started for properties whose animation behavior is \u003ca href=\"/en-US/docs/Web/CSS/Guides/Animations/Animatable_properties#discrete\"\u003ediscrete\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "TransitionBehaviorValueType , { \",\" , TransitionBehaviorValueType }", ebnf: "transition-behavior =\n TransitionBehaviorValueType , { \",\" , TransitionBehaviorValueType }", valueType: "keyword", defaultValue: "allow-discrete", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("normal", "transition-behavior: normal;"), v("allow-discrete", "transition-behavior: allow-discrete;"), ], }, { number: 318, name: "transition-delay", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etransition-delay\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the duration to wait before starting a property's \u003ca href=\"/en-US/docs/Web/CSS/Guides/Transitions/Using\"\u003etransition effect\u003c/a\u003e when its value changes.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "TimeType , { \",\" , TimeType }", ebnf: "transition-delay =\n TimeType , { \",\" , TimeType }", valueType: "keyword", defaultValue: "1s", related: [], provenance: "assisted", truncated: false, trueCount: 3, shown: 3, assists: [{ type: "\u003ctime\u003e", samples: ["0.3s", "1s", "200ms"] }], values: [ v("0.3s", "transition-delay: 0.3s;"), v("1s", "transition-delay: 1s;"), v("200ms", "transition-delay: 200ms;"), ], }, { number: 319, name: "transition-duration", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etransition-duration\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the length of time a transition animation should take to complete. By default, the value is \u003ccode\u003e0s\u003c/code\u003e, meaning that no animation will occur.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "NonNegativeTimeType , { \",\" , NonNegativeTimeType }", ebnf: "transition-duration =\n NonNegativeTimeType , { \",\" , NonNegativeTimeType }", valueType: "keyword", defaultValue: "1s", related: [], provenance: "assisted", truncated: false, trueCount: 2, shown: 2, assists: [{ type: "\u003ctime [0,∞]\u003e", samples: ["0.3s", "1s"] }], values: [ v("0.3s", "transition-duration: 0.3s;"), v("1s", "transition-duration: 1s;"), ], }, { number: 320, name: "transition-property", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etransition-property\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the CSS properties to which a \u003ca href=\"/en-US/docs/Web/CSS/Guides/Transitions/Using\"\u003etransition effect\u003c/a\u003e should be applied.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | SingleTransitionPropertyType , { \",\" , SingleTransitionPropertyType }", ebnf: "transition-property =\n \"none\" | SingleTransitionPropertyType , { \",\" , SingleTransitionPropertyType }", valueType: "keyword", defaultValue: "all", related: [], provenance: "assisted", truncated: false, trueCount: 7, shown: 7, assists: [{ type: "TransitionPropertyNameType", samples: ["opacity", "transform", "background-color", "width", "color"] }], values: [ v("none", "transition-property: none;"), v("all", "transition-property: all;"), v("opacity", "transition-property: opacity;"), v("transform", "transition-property: transform;"), v("background-color", "transition-property: background-color;"), v("width", "transition-property: width;"), v("color", "transition-property: color;"), ], }, { number: 321, name: "transition-timing-function", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etransition-timing-function\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets how intermediate values are calculated for CSS properties being affected by a \u003ca href=\"/en-US/docs/Web/CSS/Guides/Transitions/Using\"\u003etransition effect\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "EasingFunctionType , { \",\" , EasingFunctionType }", ebnf: "transition-timing-function =\n EasingFunctionType , { \",\" , EasingFunctionType }", valueType: "keyword", defaultValue: "linear(1 80% 30%)", related: [], provenance: "assisted", truncated: false, trueCount: 10, shown: 10, assists: [{ type: "\u003cinteger\u003e", samples: ["2", "1", "3", "5", "4"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "CubicBezierProgressType", samples: ["0.25", "0.5", "0.75", "0", "1"] }], values: [ v("linear", "transition-timing-function: linear;"), v("linear(1 80% 30%)", "transition-timing-function: linear(1 80% 30%);"), v("ease", "transition-timing-function: ease;"), v("ease-in", "transition-timing-function: ease-in;"), v("ease-out", "transition-timing-function: ease-out;"), v("ease-in-out", "transition-timing-function: ease-in-out;"), v("cubic-bezier(0.25, 0.5, 0.75, 0.75)", "transition-timing-function: cubic-bezier(0.25, 0.5, 0.75, 0.75);"), v("step-start", "transition-timing-function: step-start;"), v("step-end", "transition-timing-function: step-end;"), v("steps(2, jump-start)", "transition-timing-function: steps(2, jump-start);"), ], }, ], }, { id: "animations", sigil: "19", title: "Animations \u0026 Timelines", blurb: "Keyframe animations and scroll/view timelines.", demo: "generic", sampleKind: "box", group: "families", focus: false, gallery: false, count: 19, properties: [ { number: 322, name: "animation", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eanimation\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property applies an animation between styles. It is a shorthand for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/animation-name\"\u003e\u003ccode\u003eanimation-name\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/animation-duration\"\u003e\u003ccode\u003eanimation-duration\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/animation-timing-function\"\u003e\u003ccode\u003eanimation-timing-function\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/animation-delay\"\u003e\u003ccode\u003eanimation-delay\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/animation-iteration-count\"\u003e\u003ccode\u003eanimation-iteration-count\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/animation-direction\"\u003e\u003ccode\u003eanimation-direction\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/animation-fill-mode\"\u003e\u003ccode\u003eanimation-fill-mode\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/animation-play-state\"\u003e\u003ccode\u003eanimation-play-state\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/animation-timeline\"\u003e\u003ccode\u003eanimation-timeline\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "SingleAnimationType , { \",\" , SingleAnimationType }", ebnf: "animation =\n SingleAnimationType , { \",\" , SingleAnimationType }", valueType: "keyword", defaultValue: "my-ident", related: [], provenance: "assisted", truncated: true, trueCount: 113, shown: 50, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cstring\u003e", samples: ["\"Specimen\"", "\"Aa\""] }, { type: "\u003ctime\u003e", samples: ["0.3s", "1s", "200ms"] }], values: [ v("none", "animation: none;"), v("my-ident", "animation: my-ident;"), v("tag-a", "animation: tag-a;"), v("\"Specimen\"", "animation: \"Specimen\";"), v("\"Aa\"", "animation: \"Aa\";"), v("0.3s my-ident", "animation: 0.3s my-ident;"), v("0.3s tag-a", "animation: 0.3s tag-a;"), v("0.3s \"Specimen\"", "animation: 0.3s \"Specimen\";"), v("0.3s \"Aa\"", "animation: 0.3s \"Aa\";"), v("1s my-ident", "animation: 1s my-ident;"), v("1s tag-a", "animation: 1s tag-a;"), v("1s \"Specimen\"", "animation: 1s \"Specimen\";"), v("1s \"Aa\"", "animation: 1s \"Aa\";"), v("200ms my-ident", "animation: 200ms my-ident;"), v("200ms tag-a", "animation: 200ms tag-a;"), v("200ms \"Specimen\"", "animation: 200ms \"Specimen\";"), v("200ms \"Aa\"", "animation: 200ms \"Aa\";"), v("0.3s ease-in-out my-ident", "animation: 0.3s ease-in-out my-ident;"), v("0.3s ease-in-out tag-a", "animation: 0.3s ease-in-out tag-a;"), v("0.3s ease-in-out \"Specimen\"", "animation: 0.3s ease-in-out \"Specimen\";"), v("0.3s ease-in-out \"Aa\"", "animation: 0.3s ease-in-out \"Aa\";"), v("1s ease-in-out my-ident", "animation: 1s ease-in-out my-ident;"), v("1s ease-in-out tag-a", "animation: 1s ease-in-out tag-a;"), v("1s ease-in-out \"Specimen\"", "animation: 1s ease-in-out \"Specimen\";"), v("1s ease-in-out \"Aa\"", "animation: 1s ease-in-out \"Aa\";"), v("200ms ease-in-out my-ident", "animation: 200ms ease-in-out my-ident;"), v("200ms ease-in-out tag-a", "animation: 200ms ease-in-out tag-a;"), v("200ms ease-in-out \"Specimen\"", "animation: 200ms ease-in-out \"Specimen\";"), v("200ms ease-in-out \"Aa\"", "animation: 200ms ease-in-out \"Aa\";"), v("0.3s linear infinite alternate my-ident", "animation: 0.3s linear infinite alternate my-ident;"), v("0.3s linear infinite alternate tag-a", "animation: 0.3s linear infinite alternate tag-a;"), v("0.3s linear infinite alternate \"Specimen\"", "animation: 0.3s linear infinite alternate \"Specimen\";"), v("0.3s linear infinite alternate \"Aa\"", "animation: 0.3s linear infinite alternate \"Aa\";"), v("1s linear infinite alternate my-ident", "animation: 1s linear infinite alternate my-ident;"), v("1s linear infinite alternate tag-a", "animation: 1s linear infinite alternate tag-a;"), v("1s linear infinite alternate \"Specimen\"", "animation: 1s linear infinite alternate \"Specimen\";"), v("1s linear infinite alternate \"Aa\"", "animation: 1s linear infinite alternate \"Aa\";"), v("200ms linear infinite alternate my-ident", "animation: 200ms linear infinite alternate my-ident;"), v("200ms linear infinite alternate tag-a", "animation: 200ms linear infinite alternate tag-a;"), v("200ms linear infinite alternate \"Specimen\"", "animation: 200ms linear infinite alternate \"Specimen\";"), v("200ms linear infinite alternate \"Aa\"", "animation: 200ms linear infinite alternate \"Aa\";"), v("0.3s ease 0.3s 2 alternate-reverse both paused my-ident", "animation: 0.3s ease 0.3s 2 alternate-reverse both paused my-ident;"), v("0.3s ease 0.3s 2 alternate-reverse both paused tag-a", "animation: 0.3s ease 0.3s 2 alternate-reverse both paused tag-a;"), v("0.3s ease 0.3s 2 alternate-reverse both paused \"Specimen\"", "animation: 0.3s ease 0.3s 2 alternate-reverse both paused \"Specimen\";"), v("0.3s ease 0.3s 2 alternate-reverse both paused \"Aa\"", "animation: 0.3s ease 0.3s 2 alternate-reverse both paused \"Aa\";"), v("0.3s ease 1s 2 alternate-reverse both paused my-ident", "animation: 0.3s ease 1s 2 alternate-reverse both paused my-ident;"), v("0.3s ease 1s 2 alternate-reverse both paused tag-a", "animation: 0.3s ease 1s 2 alternate-reverse both paused tag-a;"), v("0.3s ease 1s 2 alternate-reverse both paused \"Specimen\"", "animation: 0.3s ease 1s 2 alternate-reverse both paused \"Specimen\";"), v("0.3s ease 1s 2 alternate-reverse both paused \"Aa\"", "animation: 0.3s ease 1s 2 alternate-reverse both paused \"Aa\";"), v("0.3s ease 200ms 2 alternate-reverse both paused my-ident", "animation: 0.3s ease 200ms 2 alternate-reverse both paused my-ident;"), ], }, { number: 323, name: "animation-composition", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eanimation-composition\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the \u003ca href=\"/en-US/docs/Glossary/Composite_operation\"\u003ecomposite operation\u003c/a\u003e to use when multiple animations affect the same property simultaneously.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "SingleAnimationCompositionType , { \",\" , SingleAnimationCompositionType }", ebnf: "animation-composition =\n SingleAnimationCompositionType , { \",\" , SingleAnimationCompositionType }", valueType: "keyword", defaultValue: "add", related: [], provenance: "pure", truncated: false, trueCount: 3, shown: 3, assists: [], values: [ v("replace", "animation-composition: replace;"), v("add", "animation-composition: add;"), v("accumulate", "animation-composition: accumulate;"), ], }, { number: 324, name: "animation-delay", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eanimation-delay\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "TimeType , { \",\" , TimeType }", ebnf: "animation-delay =\n TimeType , { \",\" , TimeType }", valueType: "keyword", defaultValue: "1s", related: [], provenance: "assisted", truncated: false, trueCount: 3, shown: 3, assists: [{ type: "\u003ctime\u003e", samples: ["0.3s", "1s", "200ms"] }], values: [ v("0.3s", "animation-delay: 0.3s;"), v("1s", "animation-delay: 1s;"), v("200ms", "animation-delay: 200ms;"), ], }, { number: 325, name: "animation-direction", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eanimation-direction\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "SingleAnimationDirectionType , { \",\" , SingleAnimationDirectionType }", ebnf: "animation-direction =\n SingleAnimationDirectionType , { \",\" , SingleAnimationDirectionType }", valueType: "keyword", defaultValue: "reverse", related: [], provenance: "pure", truncated: false, trueCount: 4, shown: 4, assists: [], values: [ v("normal", "animation-direction: normal;"), v("reverse", "animation-direction: reverse;"), v("alternate", "animation-direction: alternate;"), v("alternate-reverse", "animation-direction: alternate-reverse;"), ], }, { number: 326, name: "animation-duration", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eanimation-duration\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the length of time that an animation takes to complete one cycle.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "AnimationDurationPropItem , { \",\" , AnimationDurationPropItem }", ebnf: "animation-duration =\n AnimationDurationPropItem , { \",\" , AnimationDurationPropItem }", valueType: "keyword", defaultValue: "0.3s", related: [], provenance: "assisted", truncated: false, trueCount: 3, shown: 3, assists: [{ type: "\u003ctime [0,∞]\u003e", samples: ["0.3s", "1s"] }], values: [ v("auto", "animation-duration: auto;"), v("0.3s", "animation-duration: 0.3s;"), v("1s", "animation-duration: 1s;"), ], }, { number: 327, name: "animation-fill-mode", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eanimation-fill-mode\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets how a CSS animation applies styles to its target before and after its execution.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "SingleAnimationFillModeType , { \",\" , SingleAnimationFillModeType }", ebnf: "animation-fill-mode =\n SingleAnimationFillModeType , { \",\" , SingleAnimationFillModeType }", valueType: "keyword", defaultValue: "forwards", related: [], provenance: "pure", truncated: false, trueCount: 4, shown: 4, assists: [], values: [ v("none", "animation-fill-mode: none;"), v("forwards", "animation-fill-mode: forwards;"), v("backwards", "animation-fill-mode: backwards;"), v("both", "animation-fill-mode: both;"), ], }, { number: 328, name: "animation-iteration-count", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eanimation-iteration-count\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the number of times an animation sequence should be played before stopping.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "SingleAnimationIterationCountType , { \",\" , SingleAnimationIterationCountType }", ebnf: "animation-iteration-count =\n SingleAnimationIterationCountType , { \",\" , SingleAnimationIterationCountType }", valueType: "number", defaultValue: "1", related: [], provenance: "assisted", truncated: false, trueCount: 6, shown: 6, assists: [{ type: "\u003cnumber [0,∞]\u003e", samples: ["1", "2", "0.5", "0.75", "0.25"] }], values: [ v("infinite", "animation-iteration-count: infinite;"), v("1", "animation-iteration-count: 1;"), v("2", "animation-iteration-count: 2;"), v("0.5", "animation-iteration-count: 0.5;"), v("0.75", "animation-iteration-count: 0.75;"), v("0.25", "animation-iteration-count: 0.25;"), ], }, { number: 329, name: "animation-name", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eanimation-name\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the names of one or more \u003ca href=\"/en-US/docs/Web/CSS/Reference/At-rules/@keyframes\"\u003e\u003ccode\u003e@keyframes\u003c/code\u003e\u003c/a\u003e at-rules that describe the animation to apply to an element. Multiple \u003ccode\u003e@keyframes\u003c/code\u003e at-rules are specified as a comma-separated list of names. If the specified name does not match any \u003ccode\u003e@keyframes\u003c/code\u003e at-rule, no properties are animated.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "AnimationNamePropItem , { \",\" , AnimationNamePropItem }", ebnf: "animation-name =\n AnimationNamePropItem , { \",\" , AnimationNamePropItem }", valueType: "keyword", defaultValue: "my-ident", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cstring\u003e", samples: ["\"Specimen\"", "\"Aa\""] }], values: [ v("none", "animation-name: none;"), v("my-ident", "animation-name: my-ident;"), v("tag-a", "animation-name: tag-a;"), v("\"Specimen\"", "animation-name: \"Specimen\";"), v("\"Aa\"", "animation-name: \"Aa\";"), ], }, { number: 330, name: "animation-play-state", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eanimation-play-state\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets whether an animation is running or paused.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "SingleAnimationPlayStateType , { \",\" , SingleAnimationPlayStateType }", ebnf: "animation-play-state =\n SingleAnimationPlayStateType , { \",\" , SingleAnimationPlayStateType }", valueType: "keyword", defaultValue: "paused", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("running", "animation-play-state: running;"), v("paused", "animation-play-state: paused;"), ], }, { number: 331, name: "animation-range", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eanimation-range\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e is used to set the start and end of an animation's attachment range along its timeline, i.e., where along the timeline an animation will start and end.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "AnimationRangePropItem , { \",\" , AnimationRangePropItem }", ebnf: "animation-range =\n AnimationRangePropItem , { \",\" , AnimationRangePropItem }", valueType: "length", defaultValue: "normal 24px", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("normal normal", "animation-range: normal normal;"), v("normal 24px", "animation-range: normal 24px;"), v("normal 48px", "animation-range: normal 48px;"), v("normal 8px", "animation-range: normal 8px;"), v("normal 16px", "animation-range: normal 16px;"), v("normal 64px", "animation-range: normal 64px;"), v("normal 50%", "animation-range: normal 50%;"), v("normal 80%", "animation-range: normal 80%;"), v("normal 30%", "animation-range: normal 30%;"), v("normal 65%", "animation-range: normal 65%;"), v("normal 15%", "animation-range: normal 15%;"), v("normal 100%", "animation-range: normal 100%;"), v("normal calc(24px)", "animation-range: normal calc(24px);"), v("normal clamp(24px, 2em, 48px)", "animation-range: normal clamp(24px, 2em, 48px);"), v("normal min(24px)", "animation-range: normal min(24px);"), v("normal max(24px)", "animation-range: normal max(24px);"), v("normal round(nearest, 24px, 2em)", "animation-range: normal round(nearest, 24px, 2em);"), v("normal abs(24px)", "animation-range: normal abs(24px);"), v("normal var(--my-var, 48px)", "animation-range: normal var(--my-var, 48px);"), v("normal env(my-ident, 48px)", "animation-range: normal env(my-ident, 48px);"), v("normal cover 24px", "animation-range: normal cover 24px;"), v("normal cover 48px", "animation-range: normal cover 48px;"), v("normal cover 8px", "animation-range: normal cover 8px;"), v("normal cover 16px", "animation-range: normal cover 16px;"), v("normal cover 64px", "animation-range: normal cover 64px;"), v("normal cover 50%", "animation-range: normal cover 50%;"), v("normal cover 80%", "animation-range: normal cover 80%;"), v("normal cover 30%", "animation-range: normal cover 30%;"), v("normal cover 65%", "animation-range: normal cover 65%;"), v("normal cover 15%", "animation-range: normal cover 15%;"), v("normal cover 100%", "animation-range: normal cover 100%;"), v("normal cover calc(24px)", "animation-range: normal cover calc(24px);"), v("normal cover clamp(24px, 2em, 48px)", "animation-range: normal cover clamp(24px, 2em, 48px);"), v("normal cover min(24px)", "animation-range: normal cover min(24px);"), v("normal cover max(24px)", "animation-range: normal cover max(24px);"), v("normal cover round(nearest, 24px, 2em)", "animation-range: normal cover round(nearest, 24px, 2em);"), v("normal cover abs(24px)", "animation-range: normal cover abs(24px);"), v("normal cover var(--my-var, 48px)", "animation-range: normal cover var(--my-var, 48px);"), v("normal cover env(my-ident, 48px)", "animation-range: normal cover env(my-ident, 48px);"), v("normal cover", "animation-range: normal cover;"), v("normal contain 24px", "animation-range: normal contain 24px;"), v("normal contain 48px", "animation-range: normal contain 48px;"), v("normal contain 8px", "animation-range: normal contain 8px;"), v("normal contain 16px", "animation-range: normal contain 16px;"), v("normal contain 64px", "animation-range: normal contain 64px;"), v("normal contain 50%", "animation-range: normal contain 50%;"), v("normal contain 80%", "animation-range: normal contain 80%;"), v("normal contain 30%", "animation-range: normal contain 30%;"), v("normal contain 65%", "animation-range: normal contain 65%;"), v("normal contain 15%", "animation-range: normal contain 15%;"), ], }, { number: 332, name: "animation-range-end", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eanimation-range-end\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the point on the timeline where an animation should end.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "AnimationRangeEndPropItem , { \",\" , AnimationRangeEndPropItem }", ebnf: "animation-range-end =\n AnimationRangeEndPropItem , { \",\" , AnimationRangeEndPropItem }", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: true, trueCount: 140, shown: 50, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("normal", "animation-range-end: normal;"), v("24px", "animation-range-end: 24px;"), v("48px", "animation-range-end: 48px;"), v("8px", "animation-range-end: 8px;"), v("16px", "animation-range-end: 16px;"), v("64px", "animation-range-end: 64px;"), v("50%", "animation-range-end: 50%;"), v("80%", "animation-range-end: 80%;"), v("30%", "animation-range-end: 30%;"), v("65%", "animation-range-end: 65%;"), v("15%", "animation-range-end: 15%;"), v("100%", "animation-range-end: 100%;"), v("calc(24px)", "animation-range-end: calc(24px);"), v("clamp(24px, 2em, 48px)", "animation-range-end: clamp(24px, 2em, 48px);"), v("min(24px)", "animation-range-end: min(24px);"), v("max(24px)", "animation-range-end: max(24px);"), v("round(nearest, 24px, 2em)", "animation-range-end: round(nearest, 24px, 2em);"), v("abs(24px)", "animation-range-end: abs(24px);"), v("var(--my-var, 48px)", "animation-range-end: var(--my-var, 48px);"), v("env(my-ident, 48px)", "animation-range-end: env(my-ident, 48px);"), v("cover 24px", "animation-range-end: cover 24px;"), v("cover 48px", "animation-range-end: cover 48px;"), v("cover 8px", "animation-range-end: cover 8px;"), v("cover 16px", "animation-range-end: cover 16px;"), v("cover 64px", "animation-range-end: cover 64px;"), v("cover 50%", "animation-range-end: cover 50%;"), v("cover 80%", "animation-range-end: cover 80%;"), v("cover 30%", "animation-range-end: cover 30%;"), v("cover 65%", "animation-range-end: cover 65%;"), v("cover 15%", "animation-range-end: cover 15%;"), v("cover 100%", "animation-range-end: cover 100%;"), v("cover calc(24px)", "animation-range-end: cover calc(24px);"), v("cover clamp(24px, 2em, 48px)", "animation-range-end: cover clamp(24px, 2em, 48px);"), v("cover min(24px)", "animation-range-end: cover min(24px);"), v("cover max(24px)", "animation-range-end: cover max(24px);"), v("cover round(nearest, 24px, 2em)", "animation-range-end: cover round(nearest, 24px, 2em);"), v("cover abs(24px)", "animation-range-end: cover abs(24px);"), v("cover var(--my-var, 48px)", "animation-range-end: cover var(--my-var, 48px);"), v("cover env(my-ident, 48px)", "animation-range-end: cover env(my-ident, 48px);"), v("cover", "animation-range-end: cover;"), v("contain 24px", "animation-range-end: contain 24px;"), v("contain 48px", "animation-range-end: contain 48px;"), v("contain 8px", "animation-range-end: contain 8px;"), v("contain 16px", "animation-range-end: contain 16px;"), v("contain 64px", "animation-range-end: contain 64px;"), v("contain 50%", "animation-range-end: contain 50%;"), v("contain 80%", "animation-range-end: contain 80%;"), v("contain 30%", "animation-range-end: contain 30%;"), v("contain 65%", "animation-range-end: contain 65%;"), v("contain 15%", "animation-range-end: contain 15%;"), ], }, { number: 333, name: "animation-range-start", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eanimation-range-start\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the point on the timeline where an animation should start.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "AnimationRangeStartPropItem , { \",\" , AnimationRangeStartPropItem }", ebnf: "animation-range-start =\n AnimationRangeStartPropItem , { \",\" , AnimationRangeStartPropItem }", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: true, trueCount: 140, shown: 50, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("normal", "animation-range-start: normal;"), v("24px", "animation-range-start: 24px;"), v("48px", "animation-range-start: 48px;"), v("8px", "animation-range-start: 8px;"), v("16px", "animation-range-start: 16px;"), v("64px", "animation-range-start: 64px;"), v("50%", "animation-range-start: 50%;"), v("80%", "animation-range-start: 80%;"), v("30%", "animation-range-start: 30%;"), v("65%", "animation-range-start: 65%;"), v("15%", "animation-range-start: 15%;"), v("100%", "animation-range-start: 100%;"), v("calc(24px)", "animation-range-start: calc(24px);"), v("clamp(24px, 2em, 48px)", "animation-range-start: clamp(24px, 2em, 48px);"), v("min(24px)", "animation-range-start: min(24px);"), v("max(24px)", "animation-range-start: max(24px);"), v("round(nearest, 24px, 2em)", "animation-range-start: round(nearest, 24px, 2em);"), v("abs(24px)", "animation-range-start: abs(24px);"), v("var(--my-var, 48px)", "animation-range-start: var(--my-var, 48px);"), v("env(my-ident, 48px)", "animation-range-start: env(my-ident, 48px);"), v("cover 24px", "animation-range-start: cover 24px;"), v("cover 48px", "animation-range-start: cover 48px;"), v("cover 8px", "animation-range-start: cover 8px;"), v("cover 16px", "animation-range-start: cover 16px;"), v("cover 64px", "animation-range-start: cover 64px;"), v("cover 50%", "animation-range-start: cover 50%;"), v("cover 80%", "animation-range-start: cover 80%;"), v("cover 30%", "animation-range-start: cover 30%;"), v("cover 65%", "animation-range-start: cover 65%;"), v("cover 15%", "animation-range-start: cover 15%;"), v("cover 100%", "animation-range-start: cover 100%;"), v("cover calc(24px)", "animation-range-start: cover calc(24px);"), v("cover clamp(24px, 2em, 48px)", "animation-range-start: cover clamp(24px, 2em, 48px);"), v("cover min(24px)", "animation-range-start: cover min(24px);"), v("cover max(24px)", "animation-range-start: cover max(24px);"), v("cover round(nearest, 24px, 2em)", "animation-range-start: cover round(nearest, 24px, 2em);"), v("cover abs(24px)", "animation-range-start: cover abs(24px);"), v("cover var(--my-var, 48px)", "animation-range-start: cover var(--my-var, 48px);"), v("cover env(my-ident, 48px)", "animation-range-start: cover env(my-ident, 48px);"), v("cover", "animation-range-start: cover;"), v("contain 24px", "animation-range-start: contain 24px;"), v("contain 48px", "animation-range-start: contain 48px;"), v("contain 8px", "animation-range-start: contain 8px;"), v("contain 16px", "animation-range-start: contain 16px;"), v("contain 64px", "animation-range-start: contain 64px;"), v("contain 50%", "animation-range-start: contain 50%;"), v("contain 80%", "animation-range-start: contain 80%;"), v("contain 30%", "animation-range-start: contain 30%;"), v("contain 65%", "animation-range-start: contain 65%;"), v("contain 15%", "animation-range-start: contain 15%;"), ], }, { number: 334, name: "animation-timeline", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eanimation-timeline\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the timeline used to control the progress of a CSS animation.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "SingleAnimationTimelineType , { \",\" , SingleAnimationTimelineType }", ebnf: "animation-timeline =\n SingleAnimationTimelineType , { \",\" , SingleAnimationTimelineType }", valueType: "keyword", defaultValue: "none", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "animation-timeline: auto;"), v("none", "animation-timeline: none;"), v("--my-var", "animation-timeline: --my-var;"), v("scroll(root block)", "animation-timeline: scroll(root block);"), v("view(block auto auto)", "animation-timeline: view(block auto auto);"), ], }, { number: 335, name: "animation-timing-function", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eanimation-timing-function\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets how an animation progresses through the duration of each cycle.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "EasingFunctionType , { \",\" , EasingFunctionType }", ebnf: "animation-timing-function =\n EasingFunctionType , { \",\" , EasingFunctionType }", valueType: "keyword", defaultValue: "linear(1 80% 30%)", related: [], provenance: "assisted", truncated: false, trueCount: 10, shown: 10, assists: [{ type: "\u003cinteger\u003e", samples: ["2", "1", "3", "5", "4"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "CubicBezierProgressType", samples: ["0.25", "0.5", "0.75", "0", "1"] }], values: [ v("linear", "animation-timing-function: linear;"), v("linear(1 80% 30%)", "animation-timing-function: linear(1 80% 30%);"), v("ease", "animation-timing-function: ease;"), v("ease-in", "animation-timing-function: ease-in;"), v("ease-out", "animation-timing-function: ease-out;"), v("ease-in-out", "animation-timing-function: ease-in-out;"), v("cubic-bezier(0.25, 0.5, 0.75, 0.75)", "animation-timing-function: cubic-bezier(0.25, 0.5, 0.75, 0.75);"), v("step-start", "animation-timing-function: step-start;"), v("step-end", "animation-timing-function: step-end;"), v("steps(2, jump-start)", "animation-timing-function: steps(2, jump-start);"), ], }, { number: 336, name: "timeline-scope", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etimeline-scope\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property modifies the scope of a named animation timeline.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | \"all\" | dashed_ident_type , { \",\" , dashed_ident_type }", ebnf: "timeline-scope =\n \"none\" | \"all\" | dashed_ident_type , { \",\" , dashed_ident_type }", valueType: "keyword", defaultValue: "all", related: [], provenance: "assisted", truncated: false, trueCount: 3, shown: 3, assists: [{ type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }], values: [ v("none", "timeline-scope: none;"), v("all", "timeline-scope: all;"), v("--my-var", "timeline-scope: --my-var;"), ], }, { number: 337, name: "view-timeline", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eview-timeline\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e defines a \u003ca href=\"/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines#named_view_progress_timeline\"\u003enamed view progress timeline's\u003c/a\u003e name, direction, and inset values.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ViewTimelinePropItem , { \",\" , ViewTimelinePropItem }", ebnf: "view-timeline =\n ViewTimelinePropItem , { \",\" , ViewTimelinePropItem }", valueType: "length", defaultValue: "none block 24px", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("none block auto", "view-timeline: none block auto;"), v("none block 24px", "view-timeline: none block 24px;"), v("none block 48px", "view-timeline: none block 48px;"), v("none block 8px", "view-timeline: none block 8px;"), v("none block 16px", "view-timeline: none block 16px;"), v("none block 64px", "view-timeline: none block 64px;"), v("none block 50%", "view-timeline: none block 50%;"), v("none block 80%", "view-timeline: none block 80%;"), v("none block 30%", "view-timeline: none block 30%;"), v("none block 65%", "view-timeline: none block 65%;"), v("none block 15%", "view-timeline: none block 15%;"), v("none block 100%", "view-timeline: none block 100%;"), v("none block calc(24px)", "view-timeline: none block calc(24px);"), v("none block clamp(24px, 2em, 48px)", "view-timeline: none block clamp(24px, 2em, 48px);"), v("none block min(24px)", "view-timeline: none block min(24px);"), v("none block max(24px)", "view-timeline: none block max(24px);"), v("none block round(nearest, 24px, 2em)", "view-timeline: none block round(nearest, 24px, 2em);"), v("none block abs(24px)", "view-timeline: none block abs(24px);"), v("none block var(--my-var, 48px)", "view-timeline: none block var(--my-var, 48px);"), v("none block env(my-ident, 48px)", "view-timeline: none block env(my-ident, 48px);"), v("none block", "view-timeline: none block;"), v("none inline auto", "view-timeline: none inline auto;"), v("none inline 24px", "view-timeline: none inline 24px;"), v("none inline 48px", "view-timeline: none inline 48px;"), v("none inline 8px", "view-timeline: none inline 8px;"), v("none inline 16px", "view-timeline: none inline 16px;"), v("none inline 64px", "view-timeline: none inline 64px;"), v("none inline 50%", "view-timeline: none inline 50%;"), v("none inline 80%", "view-timeline: none inline 80%;"), v("none inline 30%", "view-timeline: none inline 30%;"), v("none inline 65%", "view-timeline: none inline 65%;"), v("none inline 15%", "view-timeline: none inline 15%;"), v("none inline 100%", "view-timeline: none inline 100%;"), v("none inline calc(24px)", "view-timeline: none inline calc(24px);"), v("none inline clamp(24px, 2em, 48px)", "view-timeline: none inline clamp(24px, 2em, 48px);"), v("none inline min(24px)", "view-timeline: none inline min(24px);"), v("none inline max(24px)", "view-timeline: none inline max(24px);"), v("none inline round(nearest, 24px, 2em)", "view-timeline: none inline round(nearest, 24px, 2em);"), v("none inline abs(24px)", "view-timeline: none inline abs(24px);"), v("none inline var(--my-var, 48px)", "view-timeline: none inline var(--my-var, 48px);"), v("none inline env(my-ident, 48px)", "view-timeline: none inline env(my-ident, 48px);"), v("none inline", "view-timeline: none inline;"), v("none x auto", "view-timeline: none x auto;"), v("none x 24px", "view-timeline: none x 24px;"), v("none x 48px", "view-timeline: none x 48px;"), v("none x 8px", "view-timeline: none x 8px;"), v("none x 16px", "view-timeline: none x 16px;"), v("none x 64px", "view-timeline: none x 64px;"), v("none x 50%", "view-timeline: none x 50%;"), v("none x 80%", "view-timeline: none x 80%;"), ], }, { number: 338, name: "view-timeline-axis", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eview-timeline-axis\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the scroll direction to be used for a \u003ca href=\"/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines#named_view_progress_timeline\"\u003enamed view progress timeline\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ViewTimelineAxisPropItem , { \",\" , ViewTimelineAxisPropItem }", ebnf: "view-timeline-axis =\n ViewTimelineAxisPropItem , { \",\" , ViewTimelineAxisPropItem }", valueType: "keyword", defaultValue: "inline", related: [], provenance: "pure", truncated: false, trueCount: 4, shown: 4, assists: [], values: [ v("block", "view-timeline-axis: block;"), v("inline", "view-timeline-axis: inline;"), v("x", "view-timeline-axis: x;"), v("y", "view-timeline-axis: y;"), ], }, { number: 339, name: "view-timeline-inset", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eview-timeline-inset\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property is used to specify one or two values representing an adjustment to the position of the scrollport (see \u003ca href=\"/en-US/docs/Glossary/Scroll_container\"\u003eScroll container\u003c/a\u003e for more details) in which the subject element of a \u003cem\u003enamed view progress timeline\u003c/em\u003e animation is deemed to be visible. Put another way, this allows you to specify start and/or end inset (or outset) values that offset the position of the timeline.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ViewTimelineInsetPropItem , { \",\" , ViewTimelineInsetPropItem }", ebnf: "view-timeline-inset =\n ViewTimelineInsetPropItem , { \",\" , ViewTimelineInsetPropItem }", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 20, shown: 20, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "view-timeline-inset: auto;"), v("24px", "view-timeline-inset: 24px;"), v("48px", "view-timeline-inset: 48px;"), v("8px", "view-timeline-inset: 8px;"), v("16px", "view-timeline-inset: 16px;"), v("64px", "view-timeline-inset: 64px;"), v("50%", "view-timeline-inset: 50%;"), v("80%", "view-timeline-inset: 80%;"), v("30%", "view-timeline-inset: 30%;"), v("65%", "view-timeline-inset: 65%;"), v("15%", "view-timeline-inset: 15%;"), v("100%", "view-timeline-inset: 100%;"), v("calc(24px)", "view-timeline-inset: calc(24px);"), v("clamp(24px, 2em, 48px)", "view-timeline-inset: clamp(24px, 2em, 48px);"), v("min(24px)", "view-timeline-inset: min(24px);"), v("max(24px)", "view-timeline-inset: max(24px);"), v("round(nearest, 24px, 2em)", "view-timeline-inset: round(nearest, 24px, 2em);"), v("abs(24px)", "view-timeline-inset: abs(24px);"), v("var(--my-var, 48px)", "view-timeline-inset: var(--my-var, 48px);"), v("env(my-ident, 48px)", "view-timeline-inset: env(my-ident, 48px);"), ], }, { number: 340, name: "view-timeline-name", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eview-timeline-name\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the names of one or more \u003ca href=\"/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines#named_view_progress_timeline\"\u003enamed view progress timelines\u003c/a\u003e associated with the element.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ViewTimelineNamePropItem , { \",\" , ViewTimelineNamePropItem }", ebnf: "view-timeline-name =\n ViewTimelineNamePropItem , { \",\" , ViewTimelineNamePropItem }", valueType: "keyword", defaultValue: "--my-var", related: [], provenance: "assisted", truncated: false, trueCount: 2, shown: 2, assists: [{ type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }], values: [ v("none", "view-timeline-name: none;"), v("--my-var", "view-timeline-name: --my-var;"), ], }, ], }, { id: "scroll", sigil: "20", title: "Scroll Behavior \u0026 Snap", blurb: "Smooth scrolling, snap points, margins and scrollbars.", demo: "generic", sampleKind: "box", group: "families", focus: false, gallery: false, count: 38, properties: [ { number: 341, name: "overscroll-behavior", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eoverscroll-behavior\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets what a browser does when reaching the boundary of a scrolling area.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "OverscrollBehaviorPropItem , [ OverscrollBehaviorPropItem ]", ebnf: "overscroll-behavior =\n OverscrollBehaviorPropItem , [ OverscrollBehaviorPropItem ]", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: false, trueCount: 4, shown: 4, assists: [], values: [ v("contain", "overscroll-behavior: contain;"), v("none", "overscroll-behavior: none;"), v("auto", "overscroll-behavior: auto;"), v("chain", "overscroll-behavior: chain;"), ], }, { number: 342, name: "overscroll-behavior-block", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eoverscroll-behavior-block\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the browser's behavior when the block direction boundary of a scrolling area is reached.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"contain\" | \"none\" | \"auto\" | \"chain\"", ebnf: "overscroll-behavior-block =\n \"contain\" | \"none\" | \"auto\" | \"chain\"", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: false, trueCount: 4, shown: 4, assists: [], values: [ v("contain", "overscroll-behavior-block: contain;"), v("none", "overscroll-behavior-block: none;"), v("auto", "overscroll-behavior-block: auto;"), v("chain", "overscroll-behavior-block: chain;"), ], }, { number: 343, name: "overscroll-behavior-inline", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eoverscroll-behavior-inline\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the browser's behavior when the inline direction boundary of a scrolling area is reached.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"contain\" | \"none\" | \"auto\" | \"chain\"", ebnf: "overscroll-behavior-inline =\n \"contain\" | \"none\" | \"auto\" | \"chain\"", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: false, trueCount: 4, shown: 4, assists: [], values: [ v("contain", "overscroll-behavior-inline: contain;"), v("none", "overscroll-behavior-inline: none;"), v("auto", "overscroll-behavior-inline: auto;"), v("chain", "overscroll-behavior-inline: chain;"), ], }, { number: 344, name: "scroll-behavior", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003escroll-behavior\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"smooth\"", ebnf: "scroll-behavior =\n \"auto\" | \"smooth\"", valueType: "keyword", defaultValue: "smooth", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("auto", "scroll-behavior: auto;"), v("smooth", "scroll-behavior: smooth;"), ], }, { number: 345, name: "scroll-initial-target", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003escroll-initial-target\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property enables the definition of elements that are potential snap targets when their ancestor \u003ca href=\"/en-US/docs/Glossary/Scroll_container\"\u003escroll container\u003c/a\u003e is first rendered.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | \"nearest\"", ebnf: "scroll-initial-target =\n \"none\" | \"nearest\"", valueType: "keyword", defaultValue: "nearest", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("none", "scroll-initial-target: none;"), v("nearest", "scroll-initial-target: nearest;"), ], }, { number: 346, name: "scroll-margin", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003escroll-margin\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e sets all of the scroll margins of an element at once, assigning values much like the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/margin\"\u003e\u003ccode\u003emargin\u003c/code\u003e\u003c/a\u003e property does for margins of an element.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LengthType , [ LengthType ] , [ LengthType ] , [ LengthType ]", ebnf: "scroll-margin =\n LengthType , [ LengthType ] , [ LengthType ] , [ LengthType ]", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "scroll-margin: 24px;"), v("48px", "scroll-margin: 48px;"), v("8px", "scroll-margin: 8px;"), v("16px", "scroll-margin: 16px;"), v("64px", "scroll-margin: 64px;"), ], }, { number: 347, name: "scroll-margin-block", maturity: "modern", description: "The \u003ccode\u003escroll-margin-block\u003c/code\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e sets the scroll margins of an element in the block dimension.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LengthType , [ LengthType ]", ebnf: "scroll-margin-block =\n LengthType , [ LengthType ]", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "scroll-margin-block: 24px;"), v("48px", "scroll-margin-block: 48px;"), v("8px", "scroll-margin-block: 8px;"), v("16px", "scroll-margin-block: 16px;"), v("64px", "scroll-margin-block: 64px;"), ], }, { number: 348, name: "scroll-margin-block-end", maturity: "modern", description: "The \u003ccode\u003escroll-margin-block-end\u003c/code\u003e property defines the margin of the scroll snap area at the end of the block dimension that is used for snapping this box to the \u003ca href=\"/en-US/docs/Glossary/Scroll_snap#snapport\"\u003esnapport\u003c/a\u003e. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LengthType", ebnf: "scroll-margin-block-end =\n LengthType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "scroll-margin-block-end: 24px;"), v("48px", "scroll-margin-block-end: 48px;"), v("8px", "scroll-margin-block-end: 8px;"), v("16px", "scroll-margin-block-end: 16px;"), v("64px", "scroll-margin-block-end: 64px;"), ], }, { number: 349, name: "scroll-margin-block-start", maturity: "modern", description: "The \u003ccode\u003escroll-margin-block-start\u003c/code\u003e property defines the margin of the scroll snap area at the start of the block dimension that is used for snapping this box to the \u003ca href=\"/en-US/docs/Glossary/Scroll_snap#snapport\"\u003esnapport\u003c/a\u003e. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LengthType", ebnf: "scroll-margin-block-start =\n LengthType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "scroll-margin-block-start: 24px;"), v("48px", "scroll-margin-block-start: 48px;"), v("8px", "scroll-margin-block-start: 8px;"), v("16px", "scroll-margin-block-start: 16px;"), v("64px", "scroll-margin-block-start: 64px;"), ], }, { number: 350, name: "scroll-margin-bottom", maturity: "modern", description: "The \u003ccode\u003escroll-margin-bottom\u003c/code\u003e property defines the bottom margin of the scroll snap area that is used for snapping this box to the \u003ca href=\"/en-US/docs/Glossary/Scroll_snap#snapport\"\u003esnapport\u003c/a\u003e. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LengthType", ebnf: "scroll-margin-bottom =\n LengthType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "scroll-margin-bottom: 24px;"), v("48px", "scroll-margin-bottom: 48px;"), v("8px", "scroll-margin-bottom: 8px;"), v("16px", "scroll-margin-bottom: 16px;"), v("64px", "scroll-margin-bottom: 64px;"), ], }, { number: 351, name: "scroll-margin-inline", maturity: "modern", description: "The \u003ccode\u003escroll-margin-inline\u003c/code\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e sets the scroll margins of an element in the inline dimension.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LengthType , [ LengthType ]", ebnf: "scroll-margin-inline =\n LengthType , [ LengthType ]", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "scroll-margin-inline: 24px;"), v("48px", "scroll-margin-inline: 48px;"), v("8px", "scroll-margin-inline: 8px;"), v("16px", "scroll-margin-inline: 16px;"), v("64px", "scroll-margin-inline: 64px;"), ], }, { number: 352, name: "scroll-margin-inline-end", maturity: "modern", description: "The \u003ccode\u003escroll-margin-inline-end\u003c/code\u003e property defines the margin of the scroll snap area at the end of the inline dimension that is used for snapping this box to the \u003ca href=\"/en-US/docs/Glossary/Scroll_snap#snapport\"\u003esnapport\u003c/a\u003e. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LengthType", ebnf: "scroll-margin-inline-end =\n LengthType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "scroll-margin-inline-end: 24px;"), v("48px", "scroll-margin-inline-end: 48px;"), v("8px", "scroll-margin-inline-end: 8px;"), v("16px", "scroll-margin-inline-end: 16px;"), v("64px", "scroll-margin-inline-end: 64px;"), ], }, { number: 353, name: "scroll-margin-inline-start", maturity: "modern", description: "The \u003ccode\u003escroll-margin-inline-start\u003c/code\u003e property defines the margin of the scroll snap area at the start of the inline dimension that is used for snapping this box to the \u003ca href=\"/en-US/docs/Glossary/Scroll_snap#snapport\"\u003esnapport\u003c/a\u003e. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LengthType", ebnf: "scroll-margin-inline-start =\n LengthType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "scroll-margin-inline-start: 24px;"), v("48px", "scroll-margin-inline-start: 48px;"), v("8px", "scroll-margin-inline-start: 8px;"), v("16px", "scroll-margin-inline-start: 16px;"), v("64px", "scroll-margin-inline-start: 64px;"), ], }, { number: 354, name: "scroll-margin-left", maturity: "modern", description: "The \u003ccode\u003escroll-margin-left\u003c/code\u003e property defines the left margin of the scroll snap area that is used for snapping this box to the \u003ca href=\"/en-US/docs/Glossary/Scroll_snap#snapport\"\u003esnapport\u003c/a\u003e. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LengthType", ebnf: "scroll-margin-left =\n LengthType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "scroll-margin-left: 24px;"), v("48px", "scroll-margin-left: 48px;"), v("8px", "scroll-margin-left: 8px;"), v("16px", "scroll-margin-left: 16px;"), v("64px", "scroll-margin-left: 64px;"), ], }, { number: 355, name: "scroll-margin-right", maturity: "modern", description: "The \u003ccode\u003escroll-margin-right\u003c/code\u003e property defines the right margin of the scroll snap area that is used for snapping this box to the \u003ca href=\"/en-US/docs/Glossary/Scroll_snap#snapport\"\u003esnapport\u003c/a\u003e. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LengthType", ebnf: "scroll-margin-right =\n LengthType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "scroll-margin-right: 24px;"), v("48px", "scroll-margin-right: 48px;"), v("8px", "scroll-margin-right: 8px;"), v("16px", "scroll-margin-right: 16px;"), v("64px", "scroll-margin-right: 64px;"), ], }, { number: 356, name: "scroll-margin-top", maturity: "modern", description: "The \u003ccode\u003escroll-margin-top\u003c/code\u003e property defines the top margin of the scroll snap area that is used for snapping this box to the \u003ca href=\"/en-US/docs/Glossary/Scroll_snap#snapport\"\u003esnapport\u003c/a\u003e. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LengthType", ebnf: "scroll-margin-top =\n LengthType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "scroll-margin-top: 24px;"), v("48px", "scroll-margin-top: 48px;"), v("8px", "scroll-margin-top: 8px;"), v("16px", "scroll-margin-top: 16px;"), v("64px", "scroll-margin-top: 64px;"), ], }, { number: 357, name: "scroll-marker-group", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003escroll-marker-group\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property controls whether a \u003ca href=\"/en-US/docs/Glossary/Scroll_container\"\u003escroll container\u003c/a\u003e element has a \u003ca href=\"/en-US/docs/Web/CSS/Reference/Selectors/::scroll-marker-group\"\u003e\u003ccode\u003e::scroll-marker-group\u003c/code\u003e\u003c/a\u003e pseudo-element generated. If present, the property also specifies whether the scroll marker group should be placed \u003ccode\u003ebefore\u003c/code\u003e \u003cem\u003eor\u003c/em\u003e \u003ccode\u003eafter\u003c/code\u003e the contents of the scroll group container in the default visual and tab order.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | ( [ ( \"before\" | \"after\" ) ] , [ ( \"links\" | \"tabs\" ) ] )", ebnf: "scroll-marker-group =\n \"none\" | ( [ ( \"before\" | \"after\" ) ] , [ ( \"links\" | \"tabs\" ) ] )", valueType: "keyword", defaultValue: "before links", related: [], provenance: "pure", truncated: false, trueCount: 9, shown: 9, assists: [], values: [ v("none", "scroll-marker-group: none;"), v("before links", "scroll-marker-group: before links;"), v("before tabs", "scroll-marker-group: before tabs;"), v("before", "scroll-marker-group: before;"), v("after links", "scroll-marker-group: after links;"), v("after tabs", "scroll-marker-group: after tabs;"), v("after", "scroll-marker-group: after;"), v("links", "scroll-marker-group: links;"), v("tabs", "scroll-marker-group: tabs;"), ], }, { number: 358, name: "scroll-padding", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003escroll-padding\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e sets scroll padding on all sides of an element at once. It specifies offsets that define the optimal viewing region of a scrollport within a \u003ca href=\"/en-US/docs/Glossary/Scroll_container\"\u003escroll container\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ScrollPaddingPropItem , [ ScrollPaddingPropItem ] , [ ScrollPaddingPropItem ] , [ ScrollPaddingPropItem ]", ebnf: "scroll-padding =\n ScrollPaddingPropItem , [ ScrollPaddingPropItem ] , [ ScrollPaddingPropItem ] , [ ScrollPaddingPropItem ]", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 20, shown: 20, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "scroll-padding: auto;"), v("24px", "scroll-padding: 24px;"), v("48px", "scroll-padding: 48px;"), v("8px", "scroll-padding: 8px;"), v("16px", "scroll-padding: 16px;"), v("64px", "scroll-padding: 64px;"), v("50%", "scroll-padding: 50%;"), v("80%", "scroll-padding: 80%;"), v("30%", "scroll-padding: 30%;"), v("65%", "scroll-padding: 65%;"), v("15%", "scroll-padding: 15%;"), v("100%", "scroll-padding: 100%;"), v("calc(24px)", "scroll-padding: calc(24px);"), v("clamp(24px, 2em, 48px)", "scroll-padding: clamp(24px, 2em, 48px);"), v("min(24px)", "scroll-padding: min(24px);"), v("max(24px)", "scroll-padding: max(24px);"), v("round(nearest, 24px, 2em)", "scroll-padding: round(nearest, 24px, 2em);"), v("abs(24px)", "scroll-padding: abs(24px);"), v("var(--my-var, 48px)", "scroll-padding: var(--my-var, 48px);"), v("env(my-ident, 48px)", "scroll-padding: env(my-ident, 48px);"), ], }, { number: 359, name: "scroll-padding-block", maturity: "modern", description: "The \u003ccode\u003escroll-padding-block\u003c/code\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e sets the scroll padding of an element in the block dimension.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ScrollPaddingBlockPropItem , [ ScrollPaddingBlockPropItem ]", ebnf: "scroll-padding-block =\n ScrollPaddingBlockPropItem , [ ScrollPaddingBlockPropItem ]", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 20, shown: 20, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "scroll-padding-block: auto;"), v("24px", "scroll-padding-block: 24px;"), v("48px", "scroll-padding-block: 48px;"), v("8px", "scroll-padding-block: 8px;"), v("16px", "scroll-padding-block: 16px;"), v("64px", "scroll-padding-block: 64px;"), v("50%", "scroll-padding-block: 50%;"), v("80%", "scroll-padding-block: 80%;"), v("30%", "scroll-padding-block: 30%;"), v("65%", "scroll-padding-block: 65%;"), v("15%", "scroll-padding-block: 15%;"), v("100%", "scroll-padding-block: 100%;"), v("calc(24px)", "scroll-padding-block: calc(24px);"), v("clamp(24px, 2em, 48px)", "scroll-padding-block: clamp(24px, 2em, 48px);"), v("min(24px)", "scroll-padding-block: min(24px);"), v("max(24px)", "scroll-padding-block: max(24px);"), v("round(nearest, 24px, 2em)", "scroll-padding-block: round(nearest, 24px, 2em);"), v("abs(24px)", "scroll-padding-block: abs(24px);"), v("var(--my-var, 48px)", "scroll-padding-block: var(--my-var, 48px);"), v("env(my-ident, 48px)", "scroll-padding-block: env(my-ident, 48px);"), ], }, { number: 360, name: "scroll-padding-block-end", maturity: "modern", description: "The \u003ccode\u003escroll-padding-block-end\u003c/code\u003e property defines offsets for the end edge in the block dimension of the \u003cem\u003eoptimal viewing region\u003c/em\u003e of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | LengthPercentageType", ebnf: "scroll-padding-block-end =\n \"auto\" | LengthPercentageType", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 20, shown: 20, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "scroll-padding-block-end: auto;"), v("24px", "scroll-padding-block-end: 24px;"), v("48px", "scroll-padding-block-end: 48px;"), v("8px", "scroll-padding-block-end: 8px;"), v("16px", "scroll-padding-block-end: 16px;"), v("64px", "scroll-padding-block-end: 64px;"), v("50%", "scroll-padding-block-end: 50%;"), v("80%", "scroll-padding-block-end: 80%;"), v("30%", "scroll-padding-block-end: 30%;"), v("65%", "scroll-padding-block-end: 65%;"), v("15%", "scroll-padding-block-end: 15%;"), v("100%", "scroll-padding-block-end: 100%;"), v("calc(24px)", "scroll-padding-block-end: calc(24px);"), v("clamp(24px, 2em, 48px)", "scroll-padding-block-end: clamp(24px, 2em, 48px);"), v("min(24px)", "scroll-padding-block-end: min(24px);"), v("max(24px)", "scroll-padding-block-end: max(24px);"), v("round(nearest, 24px, 2em)", "scroll-padding-block-end: round(nearest, 24px, 2em);"), v("abs(24px)", "scroll-padding-block-end: abs(24px);"), v("var(--my-var, 48px)", "scroll-padding-block-end: var(--my-var, 48px);"), v("env(my-ident, 48px)", "scroll-padding-block-end: env(my-ident, 48px);"), ], }, { number: 361, name: "scroll-padding-block-start", maturity: "modern", description: "The \u003ccode\u003escroll-padding-block-start\u003c/code\u003e property defines offsets for the start edge in the block dimension of the \u003cem\u003eoptimal viewing region\u003c/em\u003e of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | LengthPercentageType", ebnf: "scroll-padding-block-start =\n \"auto\" | LengthPercentageType", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 20, shown: 20, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "scroll-padding-block-start: auto;"), v("24px", "scroll-padding-block-start: 24px;"), v("48px", "scroll-padding-block-start: 48px;"), v("8px", "scroll-padding-block-start: 8px;"), v("16px", "scroll-padding-block-start: 16px;"), v("64px", "scroll-padding-block-start: 64px;"), v("50%", "scroll-padding-block-start: 50%;"), v("80%", "scroll-padding-block-start: 80%;"), v("30%", "scroll-padding-block-start: 30%;"), v("65%", "scroll-padding-block-start: 65%;"), v("15%", "scroll-padding-block-start: 15%;"), v("100%", "scroll-padding-block-start: 100%;"), v("calc(24px)", "scroll-padding-block-start: calc(24px);"), v("clamp(24px, 2em, 48px)", "scroll-padding-block-start: clamp(24px, 2em, 48px);"), v("min(24px)", "scroll-padding-block-start: min(24px);"), v("max(24px)", "scroll-padding-block-start: max(24px);"), v("round(nearest, 24px, 2em)", "scroll-padding-block-start: round(nearest, 24px, 2em);"), v("abs(24px)", "scroll-padding-block-start: abs(24px);"), v("var(--my-var, 48px)", "scroll-padding-block-start: var(--my-var, 48px);"), v("env(my-ident, 48px)", "scroll-padding-block-start: env(my-ident, 48px);"), ], }, { number: 362, name: "scroll-padding-bottom", maturity: "modern", description: "The \u003ccode\u003escroll-padding-bottom\u003c/code\u003e property defines offsets for the bottom of the \u003cem\u003eoptimal viewing region\u003c/em\u003e of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | LengthPercentageType", ebnf: "scroll-padding-bottom =\n \"auto\" | LengthPercentageType", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 20, shown: 20, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "scroll-padding-bottom: auto;"), v("24px", "scroll-padding-bottom: 24px;"), v("48px", "scroll-padding-bottom: 48px;"), v("8px", "scroll-padding-bottom: 8px;"), v("16px", "scroll-padding-bottom: 16px;"), v("64px", "scroll-padding-bottom: 64px;"), v("50%", "scroll-padding-bottom: 50%;"), v("80%", "scroll-padding-bottom: 80%;"), v("30%", "scroll-padding-bottom: 30%;"), v("65%", "scroll-padding-bottom: 65%;"), v("15%", "scroll-padding-bottom: 15%;"), v("100%", "scroll-padding-bottom: 100%;"), v("calc(24px)", "scroll-padding-bottom: calc(24px);"), v("clamp(24px, 2em, 48px)", "scroll-padding-bottom: clamp(24px, 2em, 48px);"), v("min(24px)", "scroll-padding-bottom: min(24px);"), v("max(24px)", "scroll-padding-bottom: max(24px);"), v("round(nearest, 24px, 2em)", "scroll-padding-bottom: round(nearest, 24px, 2em);"), v("abs(24px)", "scroll-padding-bottom: abs(24px);"), v("var(--my-var, 48px)", "scroll-padding-bottom: var(--my-var, 48px);"), v("env(my-ident, 48px)", "scroll-padding-bottom: env(my-ident, 48px);"), ], }, { number: 363, name: "scroll-padding-inline", maturity: "modern", description: "The \u003ccode\u003escroll-padding-inline\u003c/code\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e sets the scroll padding of an element in the inline dimension.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ScrollPaddingInlinePropItem , [ ScrollPaddingInlinePropItem ]", ebnf: "scroll-padding-inline =\n ScrollPaddingInlinePropItem , [ ScrollPaddingInlinePropItem ]", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 20, shown: 20, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "scroll-padding-inline: auto;"), v("24px", "scroll-padding-inline: 24px;"), v("48px", "scroll-padding-inline: 48px;"), v("8px", "scroll-padding-inline: 8px;"), v("16px", "scroll-padding-inline: 16px;"), v("64px", "scroll-padding-inline: 64px;"), v("50%", "scroll-padding-inline: 50%;"), v("80%", "scroll-padding-inline: 80%;"), v("30%", "scroll-padding-inline: 30%;"), v("65%", "scroll-padding-inline: 65%;"), v("15%", "scroll-padding-inline: 15%;"), v("100%", "scroll-padding-inline: 100%;"), v("calc(24px)", "scroll-padding-inline: calc(24px);"), v("clamp(24px, 2em, 48px)", "scroll-padding-inline: clamp(24px, 2em, 48px);"), v("min(24px)", "scroll-padding-inline: min(24px);"), v("max(24px)", "scroll-padding-inline: max(24px);"), v("round(nearest, 24px, 2em)", "scroll-padding-inline: round(nearest, 24px, 2em);"), v("abs(24px)", "scroll-padding-inline: abs(24px);"), v("var(--my-var, 48px)", "scroll-padding-inline: var(--my-var, 48px);"), v("env(my-ident, 48px)", "scroll-padding-inline: env(my-ident, 48px);"), ], }, { number: 364, name: "scroll-padding-inline-end", maturity: "modern", description: "The \u003ccode\u003escroll-padding-inline-end\u003c/code\u003e property defines offsets for the end edge in the inline dimension of the \u003cem\u003eoptimal viewing region\u003c/em\u003e of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | LengthPercentageType", ebnf: "scroll-padding-inline-end =\n \"auto\" | LengthPercentageType", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 20, shown: 20, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "scroll-padding-inline-end: auto;"), v("24px", "scroll-padding-inline-end: 24px;"), v("48px", "scroll-padding-inline-end: 48px;"), v("8px", "scroll-padding-inline-end: 8px;"), v("16px", "scroll-padding-inline-end: 16px;"), v("64px", "scroll-padding-inline-end: 64px;"), v("50%", "scroll-padding-inline-end: 50%;"), v("80%", "scroll-padding-inline-end: 80%;"), v("30%", "scroll-padding-inline-end: 30%;"), v("65%", "scroll-padding-inline-end: 65%;"), v("15%", "scroll-padding-inline-end: 15%;"), v("100%", "scroll-padding-inline-end: 100%;"), v("calc(24px)", "scroll-padding-inline-end: calc(24px);"), v("clamp(24px, 2em, 48px)", "scroll-padding-inline-end: clamp(24px, 2em, 48px);"), v("min(24px)", "scroll-padding-inline-end: min(24px);"), v("max(24px)", "scroll-padding-inline-end: max(24px);"), v("round(nearest, 24px, 2em)", "scroll-padding-inline-end: round(nearest, 24px, 2em);"), v("abs(24px)", "scroll-padding-inline-end: abs(24px);"), v("var(--my-var, 48px)", "scroll-padding-inline-end: var(--my-var, 48px);"), v("env(my-ident, 48px)", "scroll-padding-inline-end: env(my-ident, 48px);"), ], }, { number: 365, name: "scroll-padding-inline-start", maturity: "modern", description: "The \u003ccode\u003escroll-padding-inline-start\u003c/code\u003e property defines offsets for the start edge in the inline dimension of the \u003cem\u003eoptimal viewing region\u003c/em\u003e of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | LengthPercentageType", ebnf: "scroll-padding-inline-start =\n \"auto\" | LengthPercentageType", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 20, shown: 20, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "scroll-padding-inline-start: auto;"), v("24px", "scroll-padding-inline-start: 24px;"), v("48px", "scroll-padding-inline-start: 48px;"), v("8px", "scroll-padding-inline-start: 8px;"), v("16px", "scroll-padding-inline-start: 16px;"), v("64px", "scroll-padding-inline-start: 64px;"), v("50%", "scroll-padding-inline-start: 50%;"), v("80%", "scroll-padding-inline-start: 80%;"), v("30%", "scroll-padding-inline-start: 30%;"), v("65%", "scroll-padding-inline-start: 65%;"), v("15%", "scroll-padding-inline-start: 15%;"), v("100%", "scroll-padding-inline-start: 100%;"), v("calc(24px)", "scroll-padding-inline-start: calc(24px);"), v("clamp(24px, 2em, 48px)", "scroll-padding-inline-start: clamp(24px, 2em, 48px);"), v("min(24px)", "scroll-padding-inline-start: min(24px);"), v("max(24px)", "scroll-padding-inline-start: max(24px);"), v("round(nearest, 24px, 2em)", "scroll-padding-inline-start: round(nearest, 24px, 2em);"), v("abs(24px)", "scroll-padding-inline-start: abs(24px);"), v("var(--my-var, 48px)", "scroll-padding-inline-start: var(--my-var, 48px);"), v("env(my-ident, 48px)", "scroll-padding-inline-start: env(my-ident, 48px);"), ], }, { number: 366, name: "scroll-padding-left", maturity: "modern", description: "The \u003ccode\u003escroll-padding-left\u003c/code\u003e property defines offsets for the left of the \u003cem\u003eoptimal viewing region\u003c/em\u003e of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | LengthPercentageType", ebnf: "scroll-padding-left =\n \"auto\" | LengthPercentageType", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 20, shown: 20, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "scroll-padding-left: auto;"), v("24px", "scroll-padding-left: 24px;"), v("48px", "scroll-padding-left: 48px;"), v("8px", "scroll-padding-left: 8px;"), v("16px", "scroll-padding-left: 16px;"), v("64px", "scroll-padding-left: 64px;"), v("50%", "scroll-padding-left: 50%;"), v("80%", "scroll-padding-left: 80%;"), v("30%", "scroll-padding-left: 30%;"), v("65%", "scroll-padding-left: 65%;"), v("15%", "scroll-padding-left: 15%;"), v("100%", "scroll-padding-left: 100%;"), v("calc(24px)", "scroll-padding-left: calc(24px);"), v("clamp(24px, 2em, 48px)", "scroll-padding-left: clamp(24px, 2em, 48px);"), v("min(24px)", "scroll-padding-left: min(24px);"), v("max(24px)", "scroll-padding-left: max(24px);"), v("round(nearest, 24px, 2em)", "scroll-padding-left: round(nearest, 24px, 2em);"), v("abs(24px)", "scroll-padding-left: abs(24px);"), v("var(--my-var, 48px)", "scroll-padding-left: var(--my-var, 48px);"), v("env(my-ident, 48px)", "scroll-padding-left: env(my-ident, 48px);"), ], }, { number: 367, name: "scroll-padding-right", maturity: "modern", description: "The \u003ccode\u003escroll-padding-right\u003c/code\u003e property defines offsets for the right of the \u003cem\u003eoptimal viewing region\u003c/em\u003e of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | LengthPercentageType", ebnf: "scroll-padding-right =\n \"auto\" | LengthPercentageType", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 20, shown: 20, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "scroll-padding-right: auto;"), v("24px", "scroll-padding-right: 24px;"), v("48px", "scroll-padding-right: 48px;"), v("8px", "scroll-padding-right: 8px;"), v("16px", "scroll-padding-right: 16px;"), v("64px", "scroll-padding-right: 64px;"), v("50%", "scroll-padding-right: 50%;"), v("80%", "scroll-padding-right: 80%;"), v("30%", "scroll-padding-right: 30%;"), v("65%", "scroll-padding-right: 65%;"), v("15%", "scroll-padding-right: 15%;"), v("100%", "scroll-padding-right: 100%;"), v("calc(24px)", "scroll-padding-right: calc(24px);"), v("clamp(24px, 2em, 48px)", "scroll-padding-right: clamp(24px, 2em, 48px);"), v("min(24px)", "scroll-padding-right: min(24px);"), v("max(24px)", "scroll-padding-right: max(24px);"), v("round(nearest, 24px, 2em)", "scroll-padding-right: round(nearest, 24px, 2em);"), v("abs(24px)", "scroll-padding-right: abs(24px);"), v("var(--my-var, 48px)", "scroll-padding-right: var(--my-var, 48px);"), v("env(my-ident, 48px)", "scroll-padding-right: env(my-ident, 48px);"), ], }, { number: 368, name: "scroll-padding-top", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003escroll-padding-top\u003c/code\u003e\u003c/strong\u003e property defines offsets for the top of the \u003cem\u003eoptimal viewing region\u003c/em\u003e of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | LengthPercentageType", ebnf: "scroll-padding-top =\n \"auto\" | LengthPercentageType", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 20, shown: 20, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "scroll-padding-top: auto;"), v("24px", "scroll-padding-top: 24px;"), v("48px", "scroll-padding-top: 48px;"), v("8px", "scroll-padding-top: 8px;"), v("16px", "scroll-padding-top: 16px;"), v("64px", "scroll-padding-top: 64px;"), v("50%", "scroll-padding-top: 50%;"), v("80%", "scroll-padding-top: 80%;"), v("30%", "scroll-padding-top: 30%;"), v("65%", "scroll-padding-top: 65%;"), v("15%", "scroll-padding-top: 15%;"), v("100%", "scroll-padding-top: 100%;"), v("calc(24px)", "scroll-padding-top: calc(24px);"), v("clamp(24px, 2em, 48px)", "scroll-padding-top: clamp(24px, 2em, 48px);"), v("min(24px)", "scroll-padding-top: min(24px);"), v("max(24px)", "scroll-padding-top: max(24px);"), v("round(nearest, 24px, 2em)", "scroll-padding-top: round(nearest, 24px, 2em);"), v("abs(24px)", "scroll-padding-top: abs(24px);"), v("var(--my-var, 48px)", "scroll-padding-top: var(--my-var, 48px);"), v("env(my-ident, 48px)", "scroll-padding-top: env(my-ident, 48px);"), ], }, { number: 369, name: "scroll-snap-align", maturity: "modern", description: "The \u003ccode\u003escroll-snap-align\u003c/code\u003e property specifies the box's snap position as an alignment of its \u003ca href=\"/en-US/docs/Glossary/Scroll_snap#snap_area\"\u003esnap area\u003c/a\u003e (as the \u003ca href=\"/en-US/docs/Glossary/Alignment_Subject\"\u003ealignment subject\u003c/a\u003e) within its snap container's snap port (as the \u003ca href=\"/en-US/docs/Glossary/Alignment_Container\"\u003ealignment container\u003c/a\u003e).", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ScrollSnapAlignPropItem , [ ScrollSnapAlignPropItem ]", ebnf: "scroll-snap-align =\n ScrollSnapAlignPropItem , [ ScrollSnapAlignPropItem ]", valueType: "keyword", defaultValue: "start", related: [], provenance: "pure", truncated: false, trueCount: 4, shown: 4, assists: [], values: [ v("none", "scroll-snap-align: none;"), v("start", "scroll-snap-align: start;"), v("end", "scroll-snap-align: end;"), v("center", "scroll-snap-align: center;"), ], }, { number: 370, name: "scroll-snap-stop", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003escroll-snap-stop\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines whether or not the scroll container is allowed to \"pass over\" possible snap positions.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | \"always\"", ebnf: "scroll-snap-stop =\n \"normal\" | \"always\"", valueType: "keyword", defaultValue: "always", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("normal", "scroll-snap-stop: normal;"), v("always", "scroll-snap-stop: always;"), ], }, { number: 371, name: "scroll-snap-type", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003escroll-snap-type\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property is set on a \u003ca href=\"/en-US/docs/Glossary/Scroll_container\"\u003escroll container\u003c/a\u003e, opting it into scroll snapping by setting the direction and strictness of snap point enforcement within the \u003ca href=\"/en-US/docs/Glossary/Scroll_snap#snapport\"\u003esnap port\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | ( \"x\" | \"y\" | \"block\" | \"inline\" | \"both\" ) , [ ( \"mandatory\" | \"proximity\" ) ]", ebnf: "scroll-snap-type =\n \"none\" | ( \"x\" | \"y\" | \"block\" | \"inline\" | \"both\" ) , [ ( \"mandatory\" | \"proximity\" ) ]", valueType: "keyword", defaultValue: "x mandatory", related: [], provenance: "pure", truncated: false, trueCount: 16, shown: 16, assists: [], values: [ v("none", "scroll-snap-type: none;"), v("x mandatory", "scroll-snap-type: x mandatory;"), v("x proximity", "scroll-snap-type: x proximity;"), v("x", "scroll-snap-type: x;"), v("y mandatory", "scroll-snap-type: y mandatory;"), v("y proximity", "scroll-snap-type: y proximity;"), v("y", "scroll-snap-type: y;"), v("block mandatory", "scroll-snap-type: block mandatory;"), v("block proximity", "scroll-snap-type: block proximity;"), v("block", "scroll-snap-type: block;"), v("inline mandatory", "scroll-snap-type: inline mandatory;"), v("inline proximity", "scroll-snap-type: inline proximity;"), v("inline", "scroll-snap-type: inline;"), v("both mandatory", "scroll-snap-type: both mandatory;"), v("both proximity", "scroll-snap-type: both proximity;"), v("both", "scroll-snap-type: both;"), ], }, { number: 372, name: "scroll-target-group", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003escroll-target-group\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies whether an element is a scroll marker group container.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | \"auto\"", ebnf: "scroll-target-group =\n \"none\" | \"auto\"", valueType: "keyword", defaultValue: "auto", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("none", "scroll-target-group: none;"), v("auto", "scroll-target-group: auto;"), ], }, { number: 373, name: "scroll-timeline", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003escroll-timeline\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e is used to define a \u003ca href=\"/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines#named_scroll_progress_timelines\"\u003enamed scroll progress timeline\u003c/a\u003e, which is progressed through by scrolling a scrollable element (\u003cem\u003escroller\u003c/em\u003e) between top and bottom (or left and right).", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ScrollTimelinePropItem , { \",\" , ScrollTimelinePropItem }", ebnf: "scroll-timeline =\n ScrollTimelinePropItem , { \",\" , ScrollTimelinePropItem }", valueType: "keyword", defaultValue: "none inline", related: [], provenance: "assisted", truncated: false, trueCount: 10, shown: 10, assists: [{ type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }], values: [ v("none block", "scroll-timeline: none block;"), v("none inline", "scroll-timeline: none inline;"), v("none x", "scroll-timeline: none x;"), v("none y", "scroll-timeline: none y;"), v("none", "scroll-timeline: none;"), v("--my-var block", "scroll-timeline: --my-var block;"), v("--my-var inline", "scroll-timeline: --my-var inline;"), v("--my-var x", "scroll-timeline: --my-var x;"), v("--my-var y", "scroll-timeline: --my-var y;"), v("--my-var", "scroll-timeline: --my-var;"), ], }, { number: 374, name: "scroll-timeline-axis", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003escroll-timeline-axis\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property is used to specify the scrollbar direction that will be used to provide the \u003ca href=\"/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines\"\u003etimeline for a scroll driven animation\u003c/a\u003e, which is progressed through by scrolling a scrollable element (\u003cem\u003escroller\u003c/em\u003e).", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ScrollTimelineAxisPropItem , { \",\" , ScrollTimelineAxisPropItem }", ebnf: "scroll-timeline-axis =\n ScrollTimelineAxisPropItem , { \",\" , ScrollTimelineAxisPropItem }", valueType: "keyword", defaultValue: "inline", related: [], provenance: "pure", truncated: false, trueCount: 4, shown: 4, assists: [], values: [ v("block", "scroll-timeline-axis: block;"), v("inline", "scroll-timeline-axis: inline;"), v("x", "scroll-timeline-axis: x;"), v("y", "scroll-timeline-axis: y;"), ], }, { number: 375, name: "scroll-timeline-name", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003escroll-timeline-name\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property is used to define the name of a \u003cem\u003enamed scroll progress timeline\u003c/em\u003e, which is progressed through by scrolling a scrollable element (\u003cem\u003escroller\u003c/em\u003e) between top and bottom (or left and right). \u003ccode\u003escroll-timeline-name\u003c/code\u003e is set on the scroller that will provide the timeline.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ScrollTimelineNamePropItem , { \",\" , ScrollTimelineNamePropItem }", ebnf: "scroll-timeline-name =\n ScrollTimelineNamePropItem , { \",\" , ScrollTimelineNamePropItem }", valueType: "keyword", defaultValue: "--my-var", related: [], provenance: "assisted", truncated: false, trueCount: 2, shown: 2, assists: [{ type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }], values: [ v("none", "scroll-timeline-name: none;"), v("--my-var", "scroll-timeline-name: --my-var;"), ], }, { number: 376, name: "scrollbar-color", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003escrollbar-color\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the color of the scrollbar track and thumb.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | ColorType , ColorType", ebnf: "scrollbar-color =\n \"auto\" | ColorType , ColorType", valueType: "keyword", defaultValue: "#c5483c", related: [], provenance: "assisted", truncated: true, trueCount: 161, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "scrollbar-color: auto;"), v("#c5483c", "scrollbar-color: #c5483c;"), v("#2f5fd0", "scrollbar-color: #2f5fd0;"), v("rgb(50%, 80%, 30%, 0.75)", "scrollbar-color: rgb(50%, 80%, 30%, 0.75);"), v("rgb(1, 0.5, 2, 0.75)", "scrollbar-color: rgb(1, 0.5, 2, 0.75);"), v("rgb(from #c5483c 80% 65% 100%/ 2)", "scrollbar-color: rgb(from #c5483c 80% 65% 100%/ 2);"), v("rgba(50%, 80%, 30%, 0.75)", "scrollbar-color: rgba(50%, 80%, 30%, 0.75);"), v("rgba(1, 0.5, 2, 0.75)", "scrollbar-color: rgba(1, 0.5, 2, 0.75);"), v("rgba(from #c5483c 80% 65% 100%/ 2)", "scrollbar-color: rgba(from #c5483c 80% 65% 100%/ 2);"), v("hsl(45deg, 30%, 65%, 0.25)", "scrollbar-color: hsl(45deg, 30%, 65%, 0.25);"), v("hsl(from #c5483c 135deg 65% 100%/ 2)", "scrollbar-color: hsl(from #c5483c 135deg 65% 100%/ 2);"), v("hsla(45deg, 30%, 65%, 0.25)", "scrollbar-color: hsla(45deg, 30%, 65%, 0.25);"), v("hsla(from #c5483c 135deg 65% 100%/ 2)", "scrollbar-color: hsla(from #c5483c 135deg 65% 100%/ 2);"), v("hwb(from #c5483c 135deg 65% 100%/ 2)", "scrollbar-color: hwb(from #c5483c 135deg 65% 100%/ 2);"), v("lab(from #c5483c 80% 15% 80%/ 1)", "scrollbar-color: lab(from #c5483c 80% 15% 80%/ 1);"), v("lch(from #c5483c 80% 15% 250deg/ 1)", "scrollbar-color: lch(from #c5483c 80% 15% 250deg/ 1);"), v("oklab(from #c5483c 80% 15% 80%/ 1)", "scrollbar-color: oklab(from #c5483c 80% 15% 80%/ 1);"), v("oklch(from #c5483c 80% 15% 250deg/ 1)", "scrollbar-color: oklch(from #c5483c 80% 15% 250deg/ 1);"), v("ictcp(from #c5483c 80% 15% 80%/ 1)", "scrollbar-color: ictcp(from #c5483c 80% 15% 80%/ 1);"), v("jzazbz(from #c5483c 80% 15% 80%/ 1)", "scrollbar-color: jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("jzczhz(from #c5483c 80% 15% 250deg/ 1)", "scrollbar-color: jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("alpha(from #c5483c/ 0.5)", "scrollbar-color: alpha(from #c5483c/ 0.5);"), v("color(from #c5483c --my-var 2/ 0.5)", "scrollbar-color: color(from #c5483c --my-var 2/ 0.5);"), v("color-hdr(#c5483c 0.5, #c5483c 0.75)", "scrollbar-color: color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("aliceblue", "scrollbar-color: aliceblue;"), v("antiquewhite", "scrollbar-color: antiquewhite;"), v("aqua", "scrollbar-color: aqua;"), v("aquamarine", "scrollbar-color: aquamarine;"), v("azure", "scrollbar-color: azure;"), v("beige", "scrollbar-color: beige;"), v("bisque", "scrollbar-color: bisque;"), v("black", "scrollbar-color: black;"), v("blanchedalmond", "scrollbar-color: blanchedalmond;"), v("blue", "scrollbar-color: blue;"), v("blueviolet", "scrollbar-color: blueviolet;"), v("brown", "scrollbar-color: brown;"), v("burlywood", "scrollbar-color: burlywood;"), v("cadetblue", "scrollbar-color: cadetblue;"), v("chartreuse", "scrollbar-color: chartreuse;"), v("chocolate", "scrollbar-color: chocolate;"), v("coral", "scrollbar-color: coral;"), v("cornflowerblue", "scrollbar-color: cornflowerblue;"), v("cornsilk", "scrollbar-color: cornsilk;"), v("crimson", "scrollbar-color: crimson;"), v("cyan", "scrollbar-color: cyan;"), v("darkblue", "scrollbar-color: darkblue;"), v("darkcyan", "scrollbar-color: darkcyan;"), v("darkgoldenrod", "scrollbar-color: darkgoldenrod;"), v("darkgray", "scrollbar-color: darkgray;"), v("darkgreen", "scrollbar-color: darkgreen;"), ], }, { number: 377, name: "scrollbar-gutter", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003escrollbar-gutter\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property allows authors to reserve space for the scrollbar, preventing unwanted layout changes as the content grows while also avoiding unnecessary visuals when scrolling isn't needed.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"stable\" , [ \"both-edges\" ]", ebnf: "scrollbar-gutter =\n \"auto\" | \"stable\" , [ \"both-edges\" ]", valueType: "keyword", defaultValue: "stable both-edges", related: [], provenance: "pure", truncated: false, trueCount: 3, shown: 3, assists: [], values: [ v("auto", "scrollbar-gutter: auto;"), v("stable both-edges", "scrollbar-gutter: stable both-edges;"), v("stable", "scrollbar-gutter: stable;"), ], }, { number: 378, name: "scrollbar-width", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003escrollbar-width\u003c/code\u003e\u003c/strong\u003e property allows the author to set the desired thickness of an element's scrollbars when they are shown.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"thin\" | \"none\"", ebnf: "scrollbar-width =\n \"auto\" | \"thin\" | \"none\"", valueType: "keyword", defaultValue: "thin", related: [], provenance: "pure", truncated: false, trueCount: 3, shown: 3, assists: [], values: [ v("auto", "scrollbar-width: auto;"), v("thin", "scrollbar-width: thin;"), v("none", "scrollbar-width: none;"), ], }, ], }, { id: "object-image", sigil: "21", title: "Object \u0026 Image", blurb: "How replaced elements fit and render in their box.", demo: "generic", sampleKind: "box", group: "families", focus: false, gallery: false, count: 6, properties: [ { number: 379, name: "image-orientation", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eimage-orientation\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies a layout-independent correction to the orientation of an image.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"from-image\" | \"none\" | AngleType , [ \"flip\" ] | \"flip\" , [ AngleType ]", ebnf: "image-orientation =\n \"from-image\" | \"none\" | AngleType , [ \"flip\" ] | \"flip\" , [ AngleType ]", valueType: "angle", defaultValue: "none", related: [], provenance: "assisted", truncated: false, trueCount: 18, shown: 18, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }], values: [ v("from-image", "image-orientation: from-image;"), v("none", "image-orientation: none;"), v("45deg flip", "image-orientation: 45deg flip;"), v("45deg", "image-orientation: 45deg;"), v("135deg flip", "image-orientation: 135deg flip;"), v("135deg", "image-orientation: 135deg;"), v("250deg flip", "image-orientation: 250deg flip;"), v("250deg", "image-orientation: 250deg;"), v("320deg flip", "image-orientation: 320deg flip;"), v("320deg", "image-orientation: 320deg;"), v("90deg flip", "image-orientation: 90deg flip;"), v("90deg", "image-orientation: 90deg;"), v("flip 45deg", "image-orientation: flip 45deg;"), v("flip 135deg", "image-orientation: flip 135deg;"), v("flip 250deg", "image-orientation: flip 250deg;"), v("flip 320deg", "image-orientation: flip 320deg;"), v("flip 90deg", "image-orientation: flip 90deg;"), v("flip", "image-orientation: flip;"), ], }, { number: 380, name: "image-rendering", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eimage-rendering\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets an image scaling algorithm. The property applies to an element itself, to any images set in its other properties, and to its descendants.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"smooth\" | \"high-quality\" | \"pixelated\" | \"crisp-edges\"", ebnf: "image-rendering =\n \"auto\" | \"smooth\" | \"high-quality\" | \"pixelated\" | \"crisp-edges\"", valueType: "keyword", defaultValue: "smooth", related: [], provenance: "pure", truncated: false, trueCount: 5, shown: 5, assists: [], values: [ v("auto", "image-rendering: auto;"), v("smooth", "image-rendering: smooth;"), v("high-quality", "image-rendering: high-quality;"), v("pixelated", "image-rendering: pixelated;"), v("crisp-edges", "image-rendering: crisp-edges;"), ], }, { number: 381, name: "image-resolution", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eimage-resolution\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the intrinsic resolution of all raster images used in or on the element. It affects content images such as replaced elements and generated content, and decorative images such as \u003ccode\u003ebackground-image\u003c/code\u003e images.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "\"from-image\" , [ ResolutionType ] , [ \"snap\" ]\n | ResolutionType , [ \"from-image\" ] , [ \"snap\" ]\n | \"snap\" , ( \"from-image\" , [ ResolutionType ] | ResolutionType , [ \"from-image\" ] )", ebnf: "image-resolution =\n \"from-image\" , [ ResolutionType ] , [ \"snap\" ]\n | ResolutionType , [ \"from-image\" ] , [ \"snap\" ]\n | \"snap\" , ( \"from-image\" , [ ResolutionType ] | ResolutionType , [ \"from-image\" ] )", valueType: "keyword", defaultValue: "from-image 96dpi", related: [], provenance: "assisted", truncated: false, trueCount: 30, shown: 30, assists: [{ type: "\u003cresolution\u003e", samples: ["96dpi", "2x", "300dpi"] }], values: [ v("from-image 96dpi snap", "image-resolution: from-image 96dpi snap;"), v("from-image 96dpi", "image-resolution: from-image 96dpi;"), v("from-image 2x snap", "image-resolution: from-image 2x snap;"), v("from-image 2x", "image-resolution: from-image 2x;"), v("from-image 300dpi snap", "image-resolution: from-image 300dpi snap;"), v("from-image 300dpi", "image-resolution: from-image 300dpi;"), v("from-image snap", "image-resolution: from-image snap;"), v("from-image", "image-resolution: from-image;"), v("96dpi from-image snap", "image-resolution: 96dpi from-image snap;"), v("96dpi from-image", "image-resolution: 96dpi from-image;"), v("96dpi snap", "image-resolution: 96dpi snap;"), v("96dpi", "image-resolution: 96dpi;"), v("2x from-image snap", "image-resolution: 2x from-image snap;"), v("2x from-image", "image-resolution: 2x from-image;"), v("2x snap", "image-resolution: 2x snap;"), v("2x", "image-resolution: 2x;"), v("300dpi from-image snap", "image-resolution: 300dpi from-image snap;"), v("300dpi from-image", "image-resolution: 300dpi from-image;"), v("300dpi snap", "image-resolution: 300dpi snap;"), v("300dpi", "image-resolution: 300dpi;"), v("snap from-image 96dpi", "image-resolution: snap from-image 96dpi;"), v("snap from-image 2x", "image-resolution: snap from-image 2x;"), v("snap from-image 300dpi", "image-resolution: snap from-image 300dpi;"), v("snap from-image", "image-resolution: snap from-image;"), v("snap 96dpi from-image", "image-resolution: snap 96dpi from-image;"), v("snap 96dpi", "image-resolution: snap 96dpi;"), v("snap 2x from-image", "image-resolution: snap 2x from-image;"), v("snap 2x", "image-resolution: snap 2x;"), v("snap 300dpi from-image", "image-resolution: snap 300dpi from-image;"), v("snap 300dpi", "image-resolution: snap 300dpi;"), ], }, { number: 382, name: "object-fit", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eobject-fit\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets how the content of a \u003ca href=\"/en-US/docs/Glossary/Replaced_elements\"\u003ereplaced element\u003c/a\u003e, such as an \u003ca href=\"/en-US/docs/Web/HTML/Reference/Elements/img\"\u003e\u003ccode\u003e\u0026lt;img\u0026gt;\u003c/code\u003e\u003c/a\u003e or \u003ca href=\"/en-US/docs/Web/HTML/Reference/Elements/video\"\u003e\u003ccode\u003e\u0026lt;video\u0026gt;\u003c/code\u003e\u003c/a\u003e, should be resized to fit its container.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"fill\" | \"none\" | [ ( \"contain\" | \"cover\" ) ] , [ \"scale-down\" ]", ebnf: "object-fit =\n \"fill\" | \"none\" | [ ( \"contain\" | \"cover\" ) ] , [ \"scale-down\" ]", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: false, trueCount: 7, shown: 7, assists: [], values: [ v("fill", "object-fit: fill;"), v("none", "object-fit: none;"), v("contain scale-down", "object-fit: contain scale-down;"), v("contain", "object-fit: contain;"), v("cover scale-down", "object-fit: cover scale-down;"), v("cover", "object-fit: cover;"), v("scale-down", "object-fit: scale-down;"), ], }, { number: 383, name: "object-position", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eobject-position\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the alignment of the selected \u003ca href=\"/en-US/docs/Glossary/Replaced_elements\"\u003ereplaced element\u003c/a\u003e's contents within the element's box. Areas of the box which aren't covered by the replaced element's object will show the element's background.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "PositionType", ebnf: "object-position =\n PositionType", valueType: "keyword", defaultValue: "center", related: [], provenance: "assisted", truncated: true, trueCount: 139, shown: 50, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("left", "object-position: left;"), v("center", "object-position: center;"), v("right", "object-position: right;"), v("top", "object-position: top;"), v("bottom", "object-position: bottom;"), v("x-start", "object-position: x-start;"), v("x-end", "object-position: x-end;"), v("y-start", "object-position: y-start;"), v("y-end", "object-position: y-end;"), v("block-start", "object-position: block-start;"), v("block-end", "object-position: block-end;"), v("inline-start", "object-position: inline-start;"), v("inline-end", "object-position: inline-end;"), v("24px", "object-position: 24px;"), v("48px", "object-position: 48px;"), v("8px", "object-position: 8px;"), v("16px", "object-position: 16px;"), v("64px", "object-position: 64px;"), v("50%", "object-position: 50%;"), v("80%", "object-position: 80%;"), v("30%", "object-position: 30%;"), v("65%", "object-position: 65%;"), v("15%", "object-position: 15%;"), v("100%", "object-position: 100%;"), v("calc(24px)", "object-position: calc(24px);"), v("clamp(24px, 2em, 48px)", "object-position: clamp(24px, 2em, 48px);"), v("min(24px)", "object-position: min(24px);"), v("max(24px)", "object-position: max(24px);"), v("round(nearest, 24px, 2em)", "object-position: round(nearest, 24px, 2em);"), v("abs(24px)", "object-position: abs(24px);"), v("var(--my-var, 48px)", "object-position: var(--my-var, 48px);"), v("env(my-ident, 48px)", "object-position: env(my-ident, 48px);"), v("left top", "object-position: left top;"), v("left center", "object-position: left center;"), v("left bottom", "object-position: left bottom;"), v("left y-start", "object-position: left y-start;"), v("left y-end", "object-position: left y-end;"), v("center top", "object-position: center top;"), v("center center", "object-position: center center;"), v("center bottom", "object-position: center bottom;"), v("center y-start", "object-position: center y-start;"), v("center y-end", "object-position: center y-end;"), v("right top", "object-position: right top;"), v("right center", "object-position: right center;"), v("right bottom", "object-position: right bottom;"), v("right y-start", "object-position: right y-start;"), v("right y-end", "object-position: right y-end;"), v("x-start top", "object-position: x-start top;"), v("x-start center", "object-position: x-start center;"), v("x-start bottom", "object-position: x-start bottom;"), ], }, { number: 384, name: "object-view-box", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eobject-view-box\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines a rectangle as a viewable area (viewbox) within a \u003ca href=\"/en-US/docs/Glossary/Replaced_elements\"\u003ereplaced element\u003c/a\u003e, enabling the content of the replaced element to be zoomed or panned. It works similarly to the SVG \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/viewBox\"\u003e\u003ccode\u003eviewBox\u003c/code\u003e\u003c/a\u003e attribute.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | BasicShapeRectType", ebnf: "object-view-box =\n \"none\" | BasicShapeRectType", valueType: "length", defaultValue: "inset(24px 8px 64px 48px round 16px 24px 8px 64px/ 48px 16px 24px 8px)", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "ClipRectEdgesType", samples: ["8px, 56px, 56px, 8px"] }], values: [ v("none", "object-view-box: none;"), v("inset(24px 8px 64px 48px round 16px 24px 8px 64px/ 48px 16px 24px 8px)", "object-view-box: inset(24px 8px 64px 48px round 16px 24px 8px 64px/ 48px 16px 24px 8px);"), v("rect(8px, 56px, 56px, 8px)", "object-view-box: rect(8px, 56px, 56px, 8px);"), v("rect(24px 8px 64px 48px round 16px 24px 8px 64px/ 48px 16px 24px 8px)", "object-view-box: rect(24px 8px 64px 48px round 16px 24px 8px 64px/ 48px 16px 24px 8px);"), v("xywh(24px 8px 64px 48px round 16px 24px 8px 64px/ 48px 16px 24px 8px)", "object-view-box: xywh(24px 8px 64px 48px round 16px 24px 8px 64px/ 48px 16px 24px 8px);"), ], }, ], }, { id: "columns", sigil: "22", title: "Columns (Multicol)", blurb: "Flow text into multiple newspaper-style columns.", demo: "type", sampleKind: "text", group: "families", focus: false, gallery: false, count: 11, properties: [ { number: 385, name: "column-count", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecolumn-count\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property breaks an element's content into the specified number of columns.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | positive_integer_type | IntegerVarFn", ebnf: "column-count =\n \"auto\" | positive_integer_type | IntegerVarFn", valueType: "number", defaultValue: "2", related: [], provenance: "assisted", truncated: false, trueCount: 7, shown: 7, assists: [{ type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cinteger [1,∞]\u003e", samples: ["2", "3", "1", "5", "4"] }, { type: "\u003cinteger\u003e", samples: ["2", "1", "3", "5", "4"] }], values: [ v("auto", "column-count: auto;"), v("2", "column-count: 2;"), v("3", "column-count: 3;"), v("1", "column-count: 1;"), v("5", "column-count: 5;"), v("4", "column-count: 4;"), v("var(--my-var, 1)", "column-count: var(--my-var, 1);"), ], }, { number: 386, name: "column-fill", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecolumn-fill\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property controls how an element's contents are balanced when broken into columns.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"balance\" | \"balance-all\"", ebnf: "column-fill =\n \"auto\" | \"balance\" | \"balance-all\"", valueType: "keyword", defaultValue: "balance", related: [], provenance: "pure", truncated: false, trueCount: 3, shown: 3, assists: [], values: [ v("auto", "column-fill: auto;"), v("balance", "column-fill: balance;"), v("balance-all", "column-fill: balance-all;"), ], }, { number: 387, name: "column-height", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecolumn-height\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the height of the columns in a \u003ca href=\"/en-US/docs/Web/CSS/Guides/Multicol_layout\"\u003eCSS multi-column layout\u003c/a\u003e.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | LengthType", ebnf: "column-height =\n \"auto\" | LengthType", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 6, shown: 6, assists: [{ type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("auto", "column-height: auto;"), v("24px", "column-height: 24px;"), v("48px", "column-height: 48px;"), v("8px", "column-height: 8px;"), v("16px", "column-height: 16px;"), v("64px", "column-height: 64px;"), ], }, { number: 388, name: "column-rule", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecolumn-rule\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the width, style, and color of the line drawn between columns in a multi-column layout.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "GapRuleListType | GapAutoRuleListType", ebnf: "column-rule =\n GapRuleListType | GapAutoRuleListType", valueType: "length", defaultValue: "24px solid #2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 320, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003cflex [0,∞]\u003e", samples: ["1fr", "2fr"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003cinteger\u003e", samples: ["2", "1", "3", "5", "4"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px solid #c5483c", "column-rule: 24px solid #c5483c;"), v("24px solid #2f5fd0", "column-rule: 24px solid #2f5fd0;"), v("24px solid rgb(50%, 80%, 30%, 0.75)", "column-rule: 24px solid rgb(50%, 80%, 30%, 0.75);"), v("24px solid rgb(1, 0.5, 2, 0.75)", "column-rule: 24px solid rgb(1, 0.5, 2, 0.75);"), v("24px solid rgb(from #c5483c 80% 65% 100%/ 2)", "column-rule: 24px solid rgb(from #c5483c 80% 65% 100%/ 2);"), v("24px solid rgba(50%, 80%, 30%, 0.75)", "column-rule: 24px solid rgba(50%, 80%, 30%, 0.75);"), v("24px solid rgba(1, 0.5, 2, 0.75)", "column-rule: 24px solid rgba(1, 0.5, 2, 0.75);"), v("24px solid rgba(from #c5483c 80% 65% 100%/ 2)", "column-rule: 24px solid rgba(from #c5483c 80% 65% 100%/ 2);"), v("24px solid hsl(45deg, 30%, 65%, 0.25)", "column-rule: 24px solid hsl(45deg, 30%, 65%, 0.25);"), v("24px solid hsl(from #c5483c 135deg 65% 100%/ 2)", "column-rule: 24px solid hsl(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid hsla(45deg, 30%, 65%, 0.25)", "column-rule: 24px solid hsla(45deg, 30%, 65%, 0.25);"), v("24px solid hsla(from #c5483c 135deg 65% 100%/ 2)", "column-rule: 24px solid hsla(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid hwb(from #c5483c 135deg 65% 100%/ 2)", "column-rule: 24px solid hwb(from #c5483c 135deg 65% 100%/ 2);"), v("24px solid lab(from #c5483c 80% 15% 80%/ 1)", "column-rule: 24px solid lab(from #c5483c 80% 15% 80%/ 1);"), v("24px solid lch(from #c5483c 80% 15% 250deg/ 1)", "column-rule: 24px solid lch(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid oklab(from #c5483c 80% 15% 80%/ 1)", "column-rule: 24px solid oklab(from #c5483c 80% 15% 80%/ 1);"), v("24px solid oklch(from #c5483c 80% 15% 250deg/ 1)", "column-rule: 24px solid oklch(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid ictcp(from #c5483c 80% 15% 80%/ 1)", "column-rule: 24px solid ictcp(from #c5483c 80% 15% 80%/ 1);"), v("24px solid jzazbz(from #c5483c 80% 15% 80%/ 1)", "column-rule: 24px solid jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("24px solid jzczhz(from #c5483c 80% 15% 250deg/ 1)", "column-rule: 24px solid jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("24px solid alpha(from #c5483c/ 0.5)", "column-rule: 24px solid alpha(from #c5483c/ 0.5);"), v("24px solid color(from #c5483c --my-var 2/ 0.5)", "column-rule: 24px solid color(from #c5483c --my-var 2/ 0.5);"), v("24px solid color-hdr(#c5483c 0.5, #c5483c 0.75)", "column-rule: 24px solid color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("24px solid aliceblue", "column-rule: 24px solid aliceblue;"), v("24px solid antiquewhite", "column-rule: 24px solid antiquewhite;"), v("24px solid aqua", "column-rule: 24px solid aqua;"), v("24px solid aquamarine", "column-rule: 24px solid aquamarine;"), v("24px solid azure", "column-rule: 24px solid azure;"), v("24px solid beige", "column-rule: 24px solid beige;"), v("24px solid bisque", "column-rule: 24px solid bisque;"), v("24px solid black", "column-rule: 24px solid black;"), v("24px solid blanchedalmond", "column-rule: 24px solid blanchedalmond;"), v("24px solid blue", "column-rule: 24px solid blue;"), v("24px solid blueviolet", "column-rule: 24px solid blueviolet;"), v("24px solid brown", "column-rule: 24px solid brown;"), v("24px solid burlywood", "column-rule: 24px solid burlywood;"), v("24px solid cadetblue", "column-rule: 24px solid cadetblue;"), v("24px solid chartreuse", "column-rule: 24px solid chartreuse;"), v("24px solid chocolate", "column-rule: 24px solid chocolate;"), v("24px solid coral", "column-rule: 24px solid coral;"), v("24px solid cornflowerblue", "column-rule: 24px solid cornflowerblue;"), v("24px solid cornsilk", "column-rule: 24px solid cornsilk;"), v("24px solid crimson", "column-rule: 24px solid crimson;"), v("24px solid cyan", "column-rule: 24px solid cyan;"), v("24px solid darkblue", "column-rule: 24px solid darkblue;"), v("24px solid darkcyan", "column-rule: 24px solid darkcyan;"), v("24px solid darkgoldenrod", "column-rule: 24px solid darkgoldenrod;"), v("24px solid darkgray", "column-rule: 24px solid darkgray;"), v("24px solid darkgreen", "column-rule: 24px solid darkgreen;"), v("24px solid darkgrey", "column-rule: 24px solid darkgrey;"), ], }, { number: 389, name: "column-rule-color", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecolumn-rule-color\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the color of the line drawn between columns in a multi-column layout.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LineColorListType | AutoLineColorListType", ebnf: "column-rule-color =\n LineColorListType | AutoLineColorListType", valueType: "keyword", defaultValue: "#2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 320, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003cflex [0,∞]\u003e", samples: ["1fr", "2fr"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003cinteger\u003e", samples: ["2", "1", "3", "5", "4"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("#c5483c", "column-rule-color: #c5483c;"), v("#2f5fd0", "column-rule-color: #2f5fd0;"), v("rgb(50%, 80%, 30%, 0.75)", "column-rule-color: rgb(50%, 80%, 30%, 0.75);"), v("rgb(1, 0.5, 2, 0.75)", "column-rule-color: rgb(1, 0.5, 2, 0.75);"), v("rgb(from #c5483c 80% 65% 100%/ 2)", "column-rule-color: rgb(from #c5483c 80% 65% 100%/ 2);"), v("rgba(50%, 80%, 30%, 0.75)", "column-rule-color: rgba(50%, 80%, 30%, 0.75);"), v("rgba(1, 0.5, 2, 0.75)", "column-rule-color: rgba(1, 0.5, 2, 0.75);"), v("rgba(from #c5483c 80% 65% 100%/ 2)", "column-rule-color: rgba(from #c5483c 80% 65% 100%/ 2);"), v("hsl(45deg, 30%, 65%, 0.25)", "column-rule-color: hsl(45deg, 30%, 65%, 0.25);"), v("hsl(from #c5483c 135deg 65% 100%/ 2)", "column-rule-color: hsl(from #c5483c 135deg 65% 100%/ 2);"), v("hsla(45deg, 30%, 65%, 0.25)", "column-rule-color: hsla(45deg, 30%, 65%, 0.25);"), v("hsla(from #c5483c 135deg 65% 100%/ 2)", "column-rule-color: hsla(from #c5483c 135deg 65% 100%/ 2);"), v("hwb(from #c5483c 135deg 65% 100%/ 2)", "column-rule-color: hwb(from #c5483c 135deg 65% 100%/ 2);"), v("lab(from #c5483c 80% 15% 80%/ 1)", "column-rule-color: lab(from #c5483c 80% 15% 80%/ 1);"), v("lch(from #c5483c 80% 15% 250deg/ 1)", "column-rule-color: lch(from #c5483c 80% 15% 250deg/ 1);"), v("oklab(from #c5483c 80% 15% 80%/ 1)", "column-rule-color: oklab(from #c5483c 80% 15% 80%/ 1);"), v("oklch(from #c5483c 80% 15% 250deg/ 1)", "column-rule-color: oklch(from #c5483c 80% 15% 250deg/ 1);"), v("ictcp(from #c5483c 80% 15% 80%/ 1)", "column-rule-color: ictcp(from #c5483c 80% 15% 80%/ 1);"), v("jzazbz(from #c5483c 80% 15% 80%/ 1)", "column-rule-color: jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("jzczhz(from #c5483c 80% 15% 250deg/ 1)", "column-rule-color: jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("alpha(from #c5483c/ 0.5)", "column-rule-color: alpha(from #c5483c/ 0.5);"), v("color(from #c5483c --my-var 2/ 0.5)", "column-rule-color: color(from #c5483c --my-var 2/ 0.5);"), v("color-hdr(#c5483c 0.5, #c5483c 0.75)", "column-rule-color: color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("aliceblue", "column-rule-color: aliceblue;"), v("antiquewhite", "column-rule-color: antiquewhite;"), v("aqua", "column-rule-color: aqua;"), v("aquamarine", "column-rule-color: aquamarine;"), v("azure", "column-rule-color: azure;"), v("beige", "column-rule-color: beige;"), v("bisque", "column-rule-color: bisque;"), v("black", "column-rule-color: black;"), v("blanchedalmond", "column-rule-color: blanchedalmond;"), v("blue", "column-rule-color: blue;"), v("blueviolet", "column-rule-color: blueviolet;"), v("brown", "column-rule-color: brown;"), v("burlywood", "column-rule-color: burlywood;"), v("cadetblue", "column-rule-color: cadetblue;"), v("chartreuse", "column-rule-color: chartreuse;"), v("chocolate", "column-rule-color: chocolate;"), v("coral", "column-rule-color: coral;"), v("cornflowerblue", "column-rule-color: cornflowerblue;"), v("cornsilk", "column-rule-color: cornsilk;"), v("crimson", "column-rule-color: crimson;"), v("cyan", "column-rule-color: cyan;"), v("darkblue", "column-rule-color: darkblue;"), v("darkcyan", "column-rule-color: darkcyan;"), v("darkgoldenrod", "column-rule-color: darkgoldenrod;"), v("darkgray", "column-rule-color: darkgray;"), v("darkgreen", "column-rule-color: darkgreen;"), v("darkgrey", "column-rule-color: darkgrey;"), ], }, { number: 390, name: "column-rule-style", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecolumn-rule-style\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the style of the line drawn between columns in a multi-column layout.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LineStyleListType | AutoLineStyleListType", ebnf: "column-rule-style =\n LineStyleListType | AutoLineStyleListType", valueType: "function", defaultValue: "none", related: [], provenance: "assisted", truncated: true, trueCount: 155, shown: 50, assists: [{ type: "\u003cinteger [1,∞]\u003e", samples: ["2", "3", "1", "5", "4"] }], values: [ v("solid", "column-rule-style: solid;"), v("none", "column-rule-style: none;"), v("hidden", "column-rule-style: hidden;"), v("dotted", "column-rule-style: dotted;"), v("dashed", "column-rule-style: dashed;"), v("double", "column-rule-style: double;"), v("groove", "column-rule-style: groove;"), v("ridge", "column-rule-style: ridge;"), v("inset", "column-rule-style: inset;"), v("outset", "column-rule-style: outset;"), v("repeat(2, solid)", "column-rule-style: repeat(2, solid);"), v("solid, repeat(auto, solid), solid", "column-rule-style: solid, repeat(auto, solid), solid;"), v("solid, repeat(auto, solid), none", "column-rule-style: solid, repeat(auto, solid), none;"), v("solid, repeat(auto, solid), hidden", "column-rule-style: solid, repeat(auto, solid), hidden;"), v("solid, repeat(auto, solid), dotted", "column-rule-style: solid, repeat(auto, solid), dotted;"), v("solid, repeat(auto, solid), dashed", "column-rule-style: solid, repeat(auto, solid), dashed;"), v("solid, repeat(auto, solid), double", "column-rule-style: solid, repeat(auto, solid), double;"), v("solid, repeat(auto, solid), groove", "column-rule-style: solid, repeat(auto, solid), groove;"), v("solid, repeat(auto, solid), ridge", "column-rule-style: solid, repeat(auto, solid), ridge;"), v("solid, repeat(auto, solid), inset", "column-rule-style: solid, repeat(auto, solid), inset;"), v("solid, repeat(auto, solid), outset", "column-rule-style: solid, repeat(auto, solid), outset;"), v("solid, repeat(auto, solid), repeat(2, solid)", "column-rule-style: solid, repeat(auto, solid), repeat(2, solid);"), v("solid, repeat(auto, solid)", "column-rule-style: solid, repeat(auto, solid);"), v("none, repeat(auto, solid), solid", "column-rule-style: none, repeat(auto, solid), solid;"), v("none, repeat(auto, solid), none", "column-rule-style: none, repeat(auto, solid), none;"), v("none, repeat(auto, solid), hidden", "column-rule-style: none, repeat(auto, solid), hidden;"), v("none, repeat(auto, solid), dotted", "column-rule-style: none, repeat(auto, solid), dotted;"), v("none, repeat(auto, solid), dashed", "column-rule-style: none, repeat(auto, solid), dashed;"), v("none, repeat(auto, solid), double", "column-rule-style: none, repeat(auto, solid), double;"), v("none, repeat(auto, solid), groove", "column-rule-style: none, repeat(auto, solid), groove;"), v("none, repeat(auto, solid), ridge", "column-rule-style: none, repeat(auto, solid), ridge;"), v("none, repeat(auto, solid), inset", "column-rule-style: none, repeat(auto, solid), inset;"), v("none, repeat(auto, solid), outset", "column-rule-style: none, repeat(auto, solid), outset;"), v("none, repeat(auto, solid), repeat(2, solid)", "column-rule-style: none, repeat(auto, solid), repeat(2, solid);"), v("none, repeat(auto, solid)", "column-rule-style: none, repeat(auto, solid);"), v("hidden, repeat(auto, solid), solid", "column-rule-style: hidden, repeat(auto, solid), solid;"), v("hidden, repeat(auto, solid), none", "column-rule-style: hidden, repeat(auto, solid), none;"), v("hidden, repeat(auto, solid), hidden", "column-rule-style: hidden, repeat(auto, solid), hidden;"), v("hidden, repeat(auto, solid), dotted", "column-rule-style: hidden, repeat(auto, solid), dotted;"), v("hidden, repeat(auto, solid), dashed", "column-rule-style: hidden, repeat(auto, solid), dashed;"), v("hidden, repeat(auto, solid), double", "column-rule-style: hidden, repeat(auto, solid), double;"), v("hidden, repeat(auto, solid), groove", "column-rule-style: hidden, repeat(auto, solid), groove;"), v("hidden, repeat(auto, solid), ridge", "column-rule-style: hidden, repeat(auto, solid), ridge;"), v("hidden, repeat(auto, solid), inset", "column-rule-style: hidden, repeat(auto, solid), inset;"), v("hidden, repeat(auto, solid), outset", "column-rule-style: hidden, repeat(auto, solid), outset;"), v("hidden, repeat(auto, solid), repeat(2, solid)", "column-rule-style: hidden, repeat(auto, solid), repeat(2, solid);"), v("hidden, repeat(auto, solid)", "column-rule-style: hidden, repeat(auto, solid);"), v("dotted, repeat(auto, solid), solid", "column-rule-style: dotted, repeat(auto, solid), solid;"), v("dotted, repeat(auto, solid), none", "column-rule-style: dotted, repeat(auto, solid), none;"), v("dotted, repeat(auto, solid), hidden", "column-rule-style: dotted, repeat(auto, solid), hidden;"), ], }, { number: 391, name: "column-rule-width", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecolumn-rule-width\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the width of the line drawn between columns in a multi-column layout.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LineWidthType", ebnf: "column-rule-width =\n LineWidthType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 8, shown: 8, assists: [{ type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "column-rule-width: 24px;"), v("48px", "column-rule-width: 48px;"), v("8px", "column-rule-width: 8px;"), v("16px", "column-rule-width: 16px;"), v("64px", "column-rule-width: 64px;"), v("thin", "column-rule-width: thin;"), v("medium", "column-rule-width: medium;"), v("thick", "column-rule-width: thick;"), ], }, { number: 392, name: "column-span", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecolumn-span\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property makes it possible for an element to span across all columns when its value is set to \u003ccode\u003eall\u003c/code\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | \"all\"", ebnf: "column-span =\n \"none\" | \"all\"", valueType: "keyword", defaultValue: "all", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("none", "column-span: none;"), v("all", "column-span: all;"), ], }, { number: 393, name: "column-width", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecolumn-width\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the ideal column width in a multi-column layout. The container will have as many columns as can fit without any of them having a width less than the \u003ccode\u003ecolumn-width\u003c/code\u003e value. If the width of the container is narrower than the specified value, the single column's width will be smaller than the declared column width.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | NonNegativeLengthType | \"min-content\" | \"max-content\" | FitContentFn", ebnf: "column-width =\n \"auto\" | NonNegativeLengthType | \"min-content\" | \"max-content\" | FitContentFn", valueType: "length", defaultValue: "24px", related: [], provenance: "assisted", truncated: false, trueCount: 9, shown: 9, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "column-width: auto;"), v("24px", "column-width: 24px;"), v("48px", "column-width: 48px;"), v("8px", "column-width: 8px;"), v("16px", "column-width: 16px;"), v("64px", "column-width: 64px;"), v("min-content", "column-width: min-content;"), v("max-content", "column-width: max-content;"), v("fit-content(24px)", "column-width: fit-content(24px);"), ], }, { number: 394, name: "column-wrap", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecolumn-wrap\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the wrapping behavior of overflow columns in a \u003ca href=\"/en-US/docs/Web/CSS/Guides/Multicol_layout\"\u003eCSS multi-column layout\u003c/a\u003e.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"nowrap\" | \"wrap\"", ebnf: "column-wrap =\n \"auto\" | \"nowrap\" | \"wrap\"", valueType: "keyword", defaultValue: "nowrap", related: [], provenance: "pure", truncated: false, trueCount: 3, shown: 3, assists: [], values: [ v("auto", "column-wrap: auto;"), v("nowrap", "column-wrap: nowrap;"), v("wrap", "column-wrap: wrap;"), ], }, { number: 395, name: "columns", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecolumns\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e shorthand property sets the maximum number of columns to use when drawing an element's contents, along with the minimum width and maximum height of the element's columns.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "( ( [ ColumnWidthProp ] , [ ColumnCountProp ] ) | ( [ ColumnCountProp ] , [ ColumnWidthProp ] ) ) , [ \"/\" , ColumnHeightProp ]", ebnf: "columns =\n ( ( [ ColumnWidthProp ] , [ ColumnCountProp ] ) | ( [ ColumnCountProp ] , [ ColumnWidthProp ] ) ) , [ \"/\" , ColumnHeightProp ]", valueType: "length", defaultValue: "auto auto/ 24px", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003cinteger [1,∞]\u003e", samples: ["2", "3", "1", "5", "4"] }, { type: "\u003cinteger\u003e", samples: ["2", "1", "3", "5", "4"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto auto/ auto", "columns: auto auto/ auto;"), v("auto auto/ 24px", "columns: auto auto/ 24px;"), v("auto auto/ 48px", "columns: auto auto/ 48px;"), v("auto auto/ 8px", "columns: auto auto/ 8px;"), v("auto auto/ 16px", "columns: auto auto/ 16px;"), v("auto auto/ 64px", "columns: auto auto/ 64px;"), v("auto auto", "columns: auto auto;"), v("auto 2/ auto", "columns: auto 2/ auto;"), v("auto 2/ 24px", "columns: auto 2/ 24px;"), v("auto 2/ 48px", "columns: auto 2/ 48px;"), v("auto 2/ 8px", "columns: auto 2/ 8px;"), v("auto 2/ 16px", "columns: auto 2/ 16px;"), v("auto 2/ 64px", "columns: auto 2/ 64px;"), v("auto 2", "columns: auto 2;"), v("auto 3/ auto", "columns: auto 3/ auto;"), v("auto 3/ 24px", "columns: auto 3/ 24px;"), v("auto 3/ 48px", "columns: auto 3/ 48px;"), v("auto 3/ 8px", "columns: auto 3/ 8px;"), v("auto 3/ 16px", "columns: auto 3/ 16px;"), v("auto 3/ 64px", "columns: auto 3/ 64px;"), v("auto 3", "columns: auto 3;"), v("auto 1/ auto", "columns: auto 1/ auto;"), v("auto 1/ 24px", "columns: auto 1/ 24px;"), v("auto 1/ 48px", "columns: auto 1/ 48px;"), v("auto 1/ 8px", "columns: auto 1/ 8px;"), v("auto 1/ 16px", "columns: auto 1/ 16px;"), v("auto 1/ 64px", "columns: auto 1/ 64px;"), v("auto 1", "columns: auto 1;"), v("auto 5/ auto", "columns: auto 5/ auto;"), v("auto 5/ 24px", "columns: auto 5/ 24px;"), v("auto 5/ 48px", "columns: auto 5/ 48px;"), v("auto 5/ 8px", "columns: auto 5/ 8px;"), v("auto 5/ 16px", "columns: auto 5/ 16px;"), v("auto 5/ 64px", "columns: auto 5/ 64px;"), v("auto 5", "columns: auto 5;"), v("auto 4/ auto", "columns: auto 4/ auto;"), v("auto 4/ 24px", "columns: auto 4/ 24px;"), v("auto 4/ 48px", "columns: auto 4/ 48px;"), v("auto 4/ 8px", "columns: auto 4/ 8px;"), v("auto 4/ 16px", "columns: auto 4/ 16px;"), v("auto 4/ 64px", "columns: auto 4/ 64px;"), v("auto 4", "columns: auto 4;"), v("auto var(--my-var, 1)/ auto", "columns: auto var(--my-var, 1)/ auto;"), v("auto var(--my-var, 1)/ 24px", "columns: auto var(--my-var, 1)/ 24px;"), v("auto var(--my-var, 1)/ 48px", "columns: auto var(--my-var, 1)/ 48px;"), v("auto var(--my-var, 1)/ 8px", "columns: auto var(--my-var, 1)/ 8px;"), v("auto var(--my-var, 1)/ 16px", "columns: auto var(--my-var, 1)/ 16px;"), v("auto var(--my-var, 1)/ 64px", "columns: auto var(--my-var, 1)/ 64px;"), v("auto var(--my-var, 1)", "columns: auto var(--my-var, 1);"), v("auto/ auto", "columns: auto/ auto;"), ], }, ], }, { id: "tables", sigil: "23", title: "Tables", blurb: "Table-specific layout: fixed layout, collapse, captions.", demo: "generic", sampleKind: "box", group: "families", focus: false, gallery: false, count: 3, properties: [ { number: 396, name: "caption-side", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecaption-side\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property puts the content of a table's \u003ca href=\"/en-US/docs/Web/HTML/Reference/Elements/caption\"\u003e\u003ccode\u003e\u0026lt;caption\u0026gt;\u003c/code\u003e\u003c/a\u003e on the specified side. The values are relative to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/writing-mode\"\u003e\u003ccode\u003ewriting-mode\u003c/code\u003e\u003c/a\u003e of the table.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"top\" | \"bottom\"", ebnf: "caption-side =\n \"top\" | \"bottom\"", valueType: "keyword", defaultValue: "bottom", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("top", "caption-side: top;"), v("bottom", "caption-side: bottom;"), ], }, { number: 397, name: "empty-cells", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eempty-cells\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets whether borders and backgrounds appear around \u003ca href=\"/en-US/docs/Web/HTML/Reference/Elements/table\"\u003e\u003ccode\u003e\u0026lt;table\u0026gt;\u003c/code\u003e\u003c/a\u003e cells that have no visible content.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"show\" | \"hide\"", ebnf: "empty-cells =\n \"show\" | \"hide\"", valueType: "keyword", defaultValue: "hide", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("show", "empty-cells: show;"), v("hide", "empty-cells: hide;"), ], }, { number: 398, name: "table-layout", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etable-layout\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the algorithm used to lay out \u003ca href=\"/en-US/docs/Web/HTML/Reference/Elements/table\"\u003e\u003ccode\u003e\u0026lt;table\u0026gt;\u003c/code\u003e\u003c/a\u003e cells, rows, and columns.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"fixed\"", ebnf: "table-layout =\n \"auto\" | \"fixed\"", valueType: "keyword", defaultValue: "fixed", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("auto", "table-layout: auto;"), v("fixed", "table-layout: fixed;"), ], }, ], }, { id: "lists", sigil: "24", title: "Lists \u0026 Counters", blurb: "Markers, generated content and counters.", demo: "type", sampleKind: "text", group: "families", focus: false, gallery: false, count: 7, properties: [ { number: 399, name: "counter-increment", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecounter-increment\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property can be used to increase or decrease the value of the named \u003ca href=\"/en-US/docs/Web/CSS/Guides/Counter_styles/Using_counters\"\u003eCSS counters\u003c/a\u003e by the specified values, or to prevent all counters or an individual counter's value from being changed.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "CounterIncrementPropItem , { CounterIncrementPropItem } | \"none\"", ebnf: "counter-increment =\n CounterIncrementPropItem , { CounterIncrementPropItem } | \"none\"", valueType: "keyword", defaultValue: "my-ident 1", related: [], provenance: "assisted", truncated: false, trueCount: 13, shown: 13, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cinteger\u003e", samples: ["2", "1", "3", "5", "4"] }], values: [ v("my-ident 2", "counter-increment: my-ident 2;"), v("my-ident 1", "counter-increment: my-ident 1;"), v("my-ident 3", "counter-increment: my-ident 3;"), v("my-ident 5", "counter-increment: my-ident 5;"), v("my-ident 4", "counter-increment: my-ident 4;"), v("my-ident", "counter-increment: my-ident;"), v("tag-a 2", "counter-increment: tag-a 2;"), v("tag-a 1", "counter-increment: tag-a 1;"), v("tag-a 3", "counter-increment: tag-a 3;"), v("tag-a 5", "counter-increment: tag-a 5;"), v("tag-a 4", "counter-increment: tag-a 4;"), v("tag-a", "counter-increment: tag-a;"), v("none", "counter-increment: none;"), ], }, { number: 400, name: "counter-reset", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecounter-reset\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property creates named \u003ca href=\"/en-US/docs/Web/CSS/Guides/Counter_styles/Using_counters\"\u003eCSS counters\u003c/a\u003e and initializes them to a specific value. It supports creating counters that count up from one to the number of elements, as well as those that count down from the number of elements to one.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "CounterResetPropItem , { CounterResetPropItem } | \"none\"", ebnf: "counter-reset =\n CounterResetPropItem , { CounterResetPropItem } | \"none\"", valueType: "keyword", defaultValue: "my-ident 1", related: [], provenance: "assisted", truncated: false, trueCount: 19, shown: 19, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cinteger\u003e", samples: ["2", "1", "3", "5", "4"] }], values: [ v("my-ident 2", "counter-reset: my-ident 2;"), v("my-ident 1", "counter-reset: my-ident 1;"), v("my-ident 3", "counter-reset: my-ident 3;"), v("my-ident 5", "counter-reset: my-ident 5;"), v("my-ident 4", "counter-reset: my-ident 4;"), v("my-ident", "counter-reset: my-ident;"), v("tag-a 2", "counter-reset: tag-a 2;"), v("tag-a 1", "counter-reset: tag-a 1;"), v("tag-a 3", "counter-reset: tag-a 3;"), v("tag-a 5", "counter-reset: tag-a 5;"), v("tag-a 4", "counter-reset: tag-a 4;"), v("tag-a", "counter-reset: tag-a;"), v("reversed(my-ident) 2", "counter-reset: reversed(my-ident) 2;"), v("reversed(my-ident) 1", "counter-reset: reversed(my-ident) 1;"), v("reversed(my-ident) 3", "counter-reset: reversed(my-ident) 3;"), v("reversed(my-ident) 5", "counter-reset: reversed(my-ident) 5;"), v("reversed(my-ident) 4", "counter-reset: reversed(my-ident) 4;"), v("reversed(my-ident)", "counter-reset: reversed(my-ident);"), v("none", "counter-reset: none;"), ], }, { number: 401, name: "counter-set", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecounter-set\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets \u003ca href=\"/en-US/docs/Web/CSS/Guides/Counter_styles/Using_counters\"\u003eCSS counters\u003c/a\u003e on the element to the given values.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "CounterSetPropItem , { CounterSetPropItem } | \"none\"", ebnf: "counter-set =\n CounterSetPropItem , { CounterSetPropItem } | \"none\"", valueType: "keyword", defaultValue: "my-ident 1", related: [], provenance: "assisted", truncated: false, trueCount: 13, shown: 13, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cinteger\u003e", samples: ["2", "1", "3", "5", "4"] }], values: [ v("my-ident 2", "counter-set: my-ident 2;"), v("my-ident 1", "counter-set: my-ident 1;"), v("my-ident 3", "counter-set: my-ident 3;"), v("my-ident 5", "counter-set: my-ident 5;"), v("my-ident 4", "counter-set: my-ident 4;"), v("my-ident", "counter-set: my-ident;"), v("tag-a 2", "counter-set: tag-a 2;"), v("tag-a 1", "counter-set: tag-a 1;"), v("tag-a 3", "counter-set: tag-a 3;"), v("tag-a 5", "counter-set: tag-a 5;"), v("tag-a 4", "counter-set: tag-a 4;"), v("tag-a", "counter-set: tag-a;"), v("none", "counter-set: none;"), ], }, { number: 402, name: "list-style", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003elist-style\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e allows you to set all the list style properties at once.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ListStylePositionProp , [ ListStyleImageProp , [ ListStyleTypeProp ] | ListStyleTypeProp , [ ListStyleImageProp ] ]\n | ListStyleImageProp , [ ListStylePositionProp , [ ListStyleTypeProp ] | ListStyleTypeProp , [ ListStylePositionProp ] ]\n | ListStyleTypeProp , [ ListStylePositionProp , [ ListStyleImageProp ] | ListStyleImageProp , [ ListStylePositionProp ] ]", ebnf: "list-style =\n ListStylePositionProp , [ ListStyleImageProp , [ ListStyleTypeProp ] | ListStyleTypeProp , [ ListStyleImageProp ] ]\n | ListStyleImageProp , [ ListStylePositionProp , [ ListStyleTypeProp ] | ListStyleTypeProp , [ ListStylePositionProp ] ]\n | ListStyleTypeProp , [ ListStylePositionProp , [ ListStyleImageProp ] | ListStyleImageProp , [ ListStylePositionProp ] ]", valueType: "function", defaultValue: "inside url(assets/photo.jpg) tag-a", related: [], provenance: "assisted", truncated: true, trueCount: 320, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cresolution\u003e", samples: ["96dpi", "2x", "300dpi"] }, { type: "\u003cstring\u003e", samples: ["\"Specimen\"", "\"Aa\""] }, { type: "ConicGradientFn", samples: ["conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c)"] }, { type: "LinearGradientFn", samples: ["linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)"] }, { type: "RadialGradientFn", samples: ["radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)"] }, { type: "RepeatingConicGradientFn", samples: ["repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg)"] }, { type: "RepeatingLinearGradientFn", samples: ["repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)"] }, { type: "RepeatingRadialGradientFn", samples: ["repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px)"] }, { type: "UrlType", samples: ["url(assets/photo.jpg)"] }], values: [ v("inside url(assets/photo.jpg) my-ident", "list-style: inside url(assets/photo.jpg) my-ident;"), v("inside url(assets/photo.jpg) tag-a", "list-style: inside url(assets/photo.jpg) tag-a;"), v("inside url(assets/photo.jpg) symbols(cyclic \"Specimen\")", "list-style: inside url(assets/photo.jpg) symbols(cyclic \"Specimen\");"), v("inside url(assets/photo.jpg) \"Specimen\"", "list-style: inside url(assets/photo.jpg) \"Specimen\";"), v("inside url(assets/photo.jpg) \"Aa\"", "list-style: inside url(assets/photo.jpg) \"Aa\";"), v("inside url(assets/photo.jpg) none", "list-style: inside url(assets/photo.jpg) none;"), v("inside url(assets/photo.jpg)", "list-style: inside url(assets/photo.jpg);"), v("inside image(ltr url(assets/photo.jpg)) my-ident", "list-style: inside image(ltr url(assets/photo.jpg)) my-ident;"), v("inside image(ltr url(assets/photo.jpg)) tag-a", "list-style: inside image(ltr url(assets/photo.jpg)) tag-a;"), v("inside image(ltr url(assets/photo.jpg)) symbols(cyclic \"Specimen\")", "list-style: inside image(ltr url(assets/photo.jpg)) symbols(cyclic \"Specimen\");"), v("inside image(ltr url(assets/photo.jpg)) \"Specimen\"", "list-style: inside image(ltr url(assets/photo.jpg)) \"Specimen\";"), v("inside image(ltr url(assets/photo.jpg)) \"Aa\"", "list-style: inside image(ltr url(assets/photo.jpg)) \"Aa\";"), v("inside image(ltr url(assets/photo.jpg)) none", "list-style: inside image(ltr url(assets/photo.jpg)) none;"), v("inside image(ltr url(assets/photo.jpg))", "list-style: inside image(ltr url(assets/photo.jpg));"), v("inside image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\")) my-ident", "list-style: inside image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\")) my-ident;"), v("inside image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\")) tag-a", "list-style: inside image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\")) tag-a;"), v("inside image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\")) symbols(cyclic \"Specimen\")", "list-style: inside image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\")) symbols(cyclic \"Specimen\");"), v("inside image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\")) \"Specimen\"", "list-style: inside image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\")) \"Specimen\";"), v("inside image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\")) \"Aa\"", "list-style: inside image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\")) \"Aa\";"), v("inside image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\")) none", "list-style: inside image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\")) none;"), v("inside image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\"))", "list-style: inside image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\"));"), v("inside cross-fade(url(assets/photo.jpg) 30%) my-ident", "list-style: inside cross-fade(url(assets/photo.jpg) 30%) my-ident;"), v("inside cross-fade(url(assets/photo.jpg) 30%) tag-a", "list-style: inside cross-fade(url(assets/photo.jpg) 30%) tag-a;"), v("inside cross-fade(url(assets/photo.jpg) 30%) symbols(cyclic \"Specimen\")", "list-style: inside cross-fade(url(assets/photo.jpg) 30%) symbols(cyclic \"Specimen\");"), v("inside cross-fade(url(assets/photo.jpg) 30%) \"Specimen\"", "list-style: inside cross-fade(url(assets/photo.jpg) 30%) \"Specimen\";"), v("inside cross-fade(url(assets/photo.jpg) 30%) \"Aa\"", "list-style: inside cross-fade(url(assets/photo.jpg) 30%) \"Aa\";"), v("inside cross-fade(url(assets/photo.jpg) 30%) none", "list-style: inside cross-fade(url(assets/photo.jpg) 30%) none;"), v("inside cross-fade(url(assets/photo.jpg) 30%)", "list-style: inside cross-fade(url(assets/photo.jpg) 30%);"), v("inside element(#alpha) my-ident", "list-style: inside element(#alpha) my-ident;"), v("inside element(#alpha) tag-a", "list-style: inside element(#alpha) tag-a;"), v("inside element(#alpha) symbols(cyclic \"Specimen\")", "list-style: inside element(#alpha) symbols(cyclic \"Specimen\");"), v("inside element(#alpha) \"Specimen\"", "list-style: inside element(#alpha) \"Specimen\";"), v("inside element(#alpha) \"Aa\"", "list-style: inside element(#alpha) \"Aa\";"), v("inside element(#alpha) none", "list-style: inside element(#alpha) none;"), v("inside element(#alpha)", "list-style: inside element(#alpha);"), v("inside linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0) my-ident", "list-style: inside linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0) my-ident;"), v("inside linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0) tag-a", "list-style: inside linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0) tag-a;"), v("inside linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0) symbols(cyclic \"Specimen\")", "list-style: inside linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0) symbols(cyclic \"Specimen\");"), v("inside linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0) \"Specimen\"", "list-style: inside linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0) \"Specimen\";"), v("inside linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0) \"Aa\"", "list-style: inside linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0) \"Aa\";"), v("inside linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0) none", "list-style: inside linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0) none;"), v("inside linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)", "list-style: inside linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0);"), v("inside repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px) my-ident", "list-style: inside repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px) my-ident;"), v("inside repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px) tag-a", "list-style: inside repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px) tag-a;"), v("inside repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px) symbols(cyclic \"Specimen\")", "list-style: inside repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px) symbols(cyclic \"Specimen\");"), v("inside repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px) \"Specimen\"", "list-style: inside repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px) \"Specimen\";"), v("inside repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px) \"Aa\"", "list-style: inside repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px) \"Aa\";"), v("inside repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px) none", "list-style: inside repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px) none;"), v("inside repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)", "list-style: inside repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px);"), v("inside radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0) my-ident", "list-style: inside radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0) my-ident;"), ], }, { number: 403, name: "list-style-image", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003elist-style-image\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets an image to be used as the list item marker.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ImageType | \"none\"", ebnf: "list-style-image =\n ImageType | \"none\"", valueType: "function", defaultValue: "image(ltr url(assets/photo.jpg))", related: [], provenance: "assisted", truncated: false, trueCount: 13, shown: 13, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cresolution\u003e", samples: ["96dpi", "2x", "300dpi"] }, { type: "\u003cstring\u003e", samples: ["\"Specimen\"", "\"Aa\""] }, { type: "ConicGradientFn", samples: ["conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c)"] }, { type: "LinearGradientFn", samples: ["linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)"] }, { type: "RadialGradientFn", samples: ["radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)"] }, { type: "RepeatingConicGradientFn", samples: ["repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg)"] }, { type: "RepeatingLinearGradientFn", samples: ["repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)"] }, { type: "RepeatingRadialGradientFn", samples: ["repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px)"] }, { type: "UrlType", samples: ["url(assets/photo.jpg)"] }], values: [ v("url(assets/photo.jpg)", "list-style-image: url(assets/photo.jpg);"), v("image(ltr url(assets/photo.jpg))", "list-style-image: image(ltr url(assets/photo.jpg));"), v("image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\"))", "list-style-image: image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\"));"), v("cross-fade(url(assets/photo.jpg) 30%)", "list-style-image: cross-fade(url(assets/photo.jpg) 30%);"), v("element(#alpha)", "list-style-image: element(#alpha);"), v("linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)", "list-style-image: linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0);"), v("repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)", "list-style-image: repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px);"), v("radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)", "list-style-image: radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0);"), v("repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px)", "list-style-image: repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px);"), v("conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c)", "list-style-image: conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c);"), v("repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg)", "list-style-image: repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg);"), v("light-dark(url(assets/photo.jpg), url(assets/photo.jpg))", "list-style-image: light-dark(url(assets/photo.jpg), url(assets/photo.jpg));"), v("none", "list-style-image: none;"), ], }, { number: 404, name: "list-style-position", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003elist-style-position\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the position of the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Selectors/::marker\"\u003e\u003ccode\u003e::marker\u003c/code\u003e\u003c/a\u003e relative to a list item.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"inside\" | \"outside\"", ebnf: "list-style-position =\n \"inside\" | \"outside\"", valueType: "keyword", defaultValue: "outside", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("inside", "list-style-position: inside;"), v("outside", "list-style-position: outside;"), ], }, { number: 405, name: "list-style-type", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003elist-style-type\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the marker (such as a disc, character, or custom counter style) of a list item element.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "CounterStyleType | string_type | \"none\"", ebnf: "list-style-type =\n CounterStyleType | string_type | \"none\"", valueType: "keyword", defaultValue: "tag-a", related: [], provenance: "assisted", truncated: false, trueCount: 6, shown: 6, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cresolution\u003e", samples: ["96dpi", "2x", "300dpi"] }, { type: "\u003cstring\u003e", samples: ["\"Specimen\"", "\"Aa\""] }, { type: "ConicGradientFn", samples: ["conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c)"] }, { type: "LinearGradientFn", samples: ["linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)"] }, { type: "RadialGradientFn", samples: ["radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)"] }, { type: "RepeatingConicGradientFn", samples: ["repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg)"] }, { type: "RepeatingLinearGradientFn", samples: ["repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)"] }, { type: "RepeatingRadialGradientFn", samples: ["repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px)"] }, { type: "UrlType", samples: ["url(assets/photo.jpg)"] }], values: [ v("my-ident", "list-style-type: my-ident;"), v("tag-a", "list-style-type: tag-a;"), v("symbols(cyclic \"Specimen\")", "list-style-type: symbols(cyclic \"Specimen\");"), v("\"Specimen\"", "list-style-type: \"Specimen\";"), v("\"Aa\"", "list-style-type: \"Aa\";"), v("none", "list-style-type: none;"), ], }, ], }, { id: "interactivity", sigil: "25", title: "Interactivity \u0026 Cursor", blurb: "Pointer behaviour, selection, resizing and the cursor.", demo: "generic", sampleKind: "box", group: "families", focus: false, gallery: false, count: 11, properties: [ { number: 406, name: "appearance", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eappearance\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the rendered appearance of replaced UI widget elements such as form controls. Most commonly, such elements are given native, platform-specific styling based on the operating system's theme, or a primitive appearance with styles that can be overridden using CSS.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | \"auto\" | \"base\" | \"base-select\" | CompatAutoType | CompatSpecialType", ebnf: "appearance =\n \"none\" | \"auto\" | \"base\" | \"base-select\" | CompatAutoType | CompatSpecialType", valueType: "keyword", defaultValue: "auto", related: [], provenance: "pure", truncated: false, trueCount: 15, shown: 15, assists: [], values: [ v("none", "appearance: none;"), v("auto", "appearance: auto;"), v("base", "appearance: base;"), v("base-select", "appearance: base-select;"), v("searchfield", "appearance: searchfield;"), v("textarea", "appearance: textarea;"), v("checkbox", "appearance: checkbox;"), v("radio", "appearance: radio;"), v("menulist", "appearance: menulist;"), v("listbox", "appearance: listbox;"), v("meter", "appearance: meter;"), v("progress-bar", "appearance: progress-bar;"), v("button", "appearance: button;"), v("textfield", "appearance: textfield;"), v("menulist-button", "appearance: menulist-button;"), ], }, { number: 407, name: "caret", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecaret\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the appearance and behavior of the \u003cstrong\u003einsertion caret\u003c/strong\u003e in a single declaration.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\"\n | ( \"bar\" | \"block\" | \"underscore\" ) , [ \"manual\" ] , [ hex_color_type ]\n | \"manual\" , [ hex_color_type ]\n | hex_color_type", ebnf: "caret =\n \"auto\"\n | ( \"bar\" | \"block\" | \"underscore\" ) , [ \"manual\" ] , [ hex_color_type ]\n | \"manual\" , [ hex_color_type ]\n | hex_color_type", valueType: "keyword", defaultValue: "bar manual #c5483c", related: [], provenance: "assisted", truncated: false, trueCount: 24, shown: 24, assists: [{ type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }], values: [ v("auto", "caret: auto;"), v("bar manual #c5483c", "caret: bar manual #c5483c;"), v("bar manual #2f5fd0", "caret: bar manual #2f5fd0;"), v("bar manual", "caret: bar manual;"), v("bar #c5483c", "caret: bar #c5483c;"), v("bar #2f5fd0", "caret: bar #2f5fd0;"), v("bar", "caret: bar;"), v("block manual #c5483c", "caret: block manual #c5483c;"), v("block manual #2f5fd0", "caret: block manual #2f5fd0;"), v("block manual", "caret: block manual;"), v("block #c5483c", "caret: block #c5483c;"), v("block #2f5fd0", "caret: block #2f5fd0;"), v("block", "caret: block;"), v("underscore manual #c5483c", "caret: underscore manual #c5483c;"), v("underscore manual #2f5fd0", "caret: underscore manual #2f5fd0;"), v("underscore manual", "caret: underscore manual;"), v("underscore #c5483c", "caret: underscore #c5483c;"), v("underscore #2f5fd0", "caret: underscore #2f5fd0;"), v("underscore", "caret: underscore;"), v("manual #c5483c", "caret: manual #c5483c;"), v("manual #2f5fd0", "caret: manual #2f5fd0;"), v("manual", "caret: manual;"), v("#c5483c", "caret: #c5483c;"), v("#2f5fd0", "caret: #2f5fd0;"), ], }, { number: 408, name: "caret-animation", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecaret-animation\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property is used to enable or disable the blinking behavior of the \u003cstrong\u003einsertion caret\u003c/strong\u003e, the visible marker that appears in editable elements to indicate where the next character will be inserted or deleted.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"manual\"", ebnf: "caret-animation =\n \"auto\" | \"manual\"", valueType: "keyword", defaultValue: "manual", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("auto", "caret-animation: auto;"), v("manual", "caret-animation: manual;"), ], }, { number: 409, name: "caret-color", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecaret-color\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the color of the \u003cstrong\u003einsertion caret\u003c/strong\u003e, sometimes referred to as the \u003cstrong\u003etext input cursor\u003c/strong\u003e. This is the visible marker appearing at the insertion point where the next character typed will be added or where the next character deleted will be removed.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | ColorType", ebnf: "caret-color =\n \"auto\" | ColorType", valueType: "keyword", defaultValue: "#c5483c", related: [], provenance: "assisted", truncated: true, trueCount: 161, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "caret-color: auto;"), v("#c5483c", "caret-color: #c5483c;"), v("#2f5fd0", "caret-color: #2f5fd0;"), v("rgb(50%, 80%, 30%, 0.75)", "caret-color: rgb(50%, 80%, 30%, 0.75);"), v("rgb(1, 0.5, 2, 0.75)", "caret-color: rgb(1, 0.5, 2, 0.75);"), v("rgb(from #c5483c 80% 65% 100%/ 2)", "caret-color: rgb(from #c5483c 80% 65% 100%/ 2);"), v("rgba(50%, 80%, 30%, 0.75)", "caret-color: rgba(50%, 80%, 30%, 0.75);"), v("rgba(1, 0.5, 2, 0.75)", "caret-color: rgba(1, 0.5, 2, 0.75);"), v("rgba(from #c5483c 80% 65% 100%/ 2)", "caret-color: rgba(from #c5483c 80% 65% 100%/ 2);"), v("hsl(45deg, 30%, 65%, 0.25)", "caret-color: hsl(45deg, 30%, 65%, 0.25);"), v("hsl(from #c5483c 135deg 65% 100%/ 2)", "caret-color: hsl(from #c5483c 135deg 65% 100%/ 2);"), v("hsla(45deg, 30%, 65%, 0.25)", "caret-color: hsla(45deg, 30%, 65%, 0.25);"), v("hsla(from #c5483c 135deg 65% 100%/ 2)", "caret-color: hsla(from #c5483c 135deg 65% 100%/ 2);"), v("hwb(from #c5483c 135deg 65% 100%/ 2)", "caret-color: hwb(from #c5483c 135deg 65% 100%/ 2);"), v("lab(from #c5483c 80% 15% 80%/ 1)", "caret-color: lab(from #c5483c 80% 15% 80%/ 1);"), v("lch(from #c5483c 80% 15% 250deg/ 1)", "caret-color: lch(from #c5483c 80% 15% 250deg/ 1);"), v("oklab(from #c5483c 80% 15% 80%/ 1)", "caret-color: oklab(from #c5483c 80% 15% 80%/ 1);"), v("oklch(from #c5483c 80% 15% 250deg/ 1)", "caret-color: oklch(from #c5483c 80% 15% 250deg/ 1);"), v("ictcp(from #c5483c 80% 15% 80%/ 1)", "caret-color: ictcp(from #c5483c 80% 15% 80%/ 1);"), v("jzazbz(from #c5483c 80% 15% 80%/ 1)", "caret-color: jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("jzczhz(from #c5483c 80% 15% 250deg/ 1)", "caret-color: jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("alpha(from #c5483c/ 0.5)", "caret-color: alpha(from #c5483c/ 0.5);"), v("color(from #c5483c --my-var 2/ 0.5)", "caret-color: color(from #c5483c --my-var 2/ 0.5);"), v("color-hdr(#c5483c 0.5, #c5483c 0.75)", "caret-color: color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("aliceblue", "caret-color: aliceblue;"), v("antiquewhite", "caret-color: antiquewhite;"), v("aqua", "caret-color: aqua;"), v("aquamarine", "caret-color: aquamarine;"), v("azure", "caret-color: azure;"), v("beige", "caret-color: beige;"), v("bisque", "caret-color: bisque;"), v("black", "caret-color: black;"), v("blanchedalmond", "caret-color: blanchedalmond;"), v("blue", "caret-color: blue;"), v("blueviolet", "caret-color: blueviolet;"), v("brown", "caret-color: brown;"), v("burlywood", "caret-color: burlywood;"), v("cadetblue", "caret-color: cadetblue;"), v("chartreuse", "caret-color: chartreuse;"), v("chocolate", "caret-color: chocolate;"), v("coral", "caret-color: coral;"), v("cornflowerblue", "caret-color: cornflowerblue;"), v("cornsilk", "caret-color: cornsilk;"), v("crimson", "caret-color: crimson;"), v("cyan", "caret-color: cyan;"), v("darkblue", "caret-color: darkblue;"), v("darkcyan", "caret-color: darkcyan;"), v("darkgoldenrod", "caret-color: darkgoldenrod;"), v("darkgray", "caret-color: darkgray;"), v("darkgreen", "caret-color: darkgreen;"), ], }, { number: 410, name: "caret-shape", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecaret-shape\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the shape of the \u003cstrong\u003einsertion caret\u003c/strong\u003e, the visible marker that appears in editable elements to indicate where the next character will be inserted or deleted.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"bar\" | \"block\" | \"underscore\"", ebnf: "caret-shape =\n \"auto\" | \"bar\" | \"block\" | \"underscore\"", valueType: "keyword", defaultValue: "bar", related: [], provenance: "pure", truncated: false, trueCount: 4, shown: 4, assists: [], values: [ v("auto", "caret-shape: auto;"), v("bar", "caret-shape: bar;"), v("block", "caret-shape: block;"), v("underscore", "caret-shape: underscore;"), ], }, { number: 411, name: "cursor", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecursor\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the mouse cursor, if any, to show when the mouse pointer is over an element.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "[ CursorImageType , { \",\" , CursorImageType } , \",\" ] , CursorPredefinedType", ebnf: "cursor =\n [ CursorImageType , { \",\" , CursorImageType } , \",\" ] , CursorPredefinedType", valueType: "keyword", defaultValue: "default", related: [], provenance: "pure", truncated: false, trueCount: 36, shown: 36, assists: [], values: [ v("auto", "cursor: auto;"), v("default", "cursor: default;"), v("none", "cursor: none;"), v("context-menu", "cursor: context-menu;"), v("help", "cursor: help;"), v("pointer", "cursor: pointer;"), v("progress", "cursor: progress;"), v("wait", "cursor: wait;"), v("cell", "cursor: cell;"), v("crosshair", "cursor: crosshair;"), v("text", "cursor: text;"), v("vertical-text", "cursor: vertical-text;"), v("alias", "cursor: alias;"), v("copy", "cursor: copy;"), v("move", "cursor: move;"), v("no-drop", "cursor: no-drop;"), v("not-allowed", "cursor: not-allowed;"), v("grab", "cursor: grab;"), v("grabbing", "cursor: grabbing;"), v("e-resize", "cursor: e-resize;"), v("n-resize", "cursor: n-resize;"), v("ne-resize", "cursor: ne-resize;"), v("nw-resize", "cursor: nw-resize;"), v("s-resize", "cursor: s-resize;"), v("se-resize", "cursor: se-resize;"), v("sw-resize", "cursor: sw-resize;"), v("w-resize", "cursor: w-resize;"), v("ew-resize", "cursor: ew-resize;"), v("ns-resize", "cursor: ns-resize;"), v("nesw-resize", "cursor: nesw-resize;"), v("nwse-resize", "cursor: nwse-resize;"), v("col-resize", "cursor: col-resize;"), v("row-resize", "cursor: row-resize;"), v("all-scroll", "cursor: all-scroll;"), v("zoom-in", "cursor: zoom-in;"), v("zoom-out", "cursor: zoom-out;"), ], }, { number: 412, name: "field-sizing", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efield-sizing\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property enables you to control the sizing behavior of elements that are given a default preferred size, such as form control elements. This property enables you to override the default sizing behavior, allowing form controls to adjust in size to fit their contents.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"fixed\" | \"content\"", ebnf: "field-sizing =\n \"fixed\" | \"content\"", valueType: "keyword", defaultValue: "content", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("fixed", "field-sizing: fixed;"), v("content", "field-sizing: content;"), ], }, { number: 413, name: "pointer-events", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003epointer-events\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets under what circumstances (if any) a particular graphic element can become the \u003ca href=\"/en-US/docs/Web/API/Event/target\"\u003etarget\u003c/a\u003e of pointer events.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"bounding-box\" | \"visiblePainted\" | \"visibleFill\" | \"visibleStroke\" | \"visible\" | \"painted\" | \"fill\" | \"stroke\" | \"all\" | \"none\"", ebnf: "pointer-events =\n \"auto\" | \"bounding-box\" | \"visiblePainted\" | \"visibleFill\" | \"visibleStroke\" | \"visible\" | \"painted\" | \"fill\" | \"stroke\" | \"all\" | \"none\"", valueType: "keyword", defaultValue: "bounding-box", related: [], provenance: "pure", truncated: false, trueCount: 11, shown: 11, assists: [], values: [ v("auto", "pointer-events: auto;"), v("bounding-box", "pointer-events: bounding-box;"), v("visiblePainted", "pointer-events: visiblePainted;"), v("visibleFill", "pointer-events: visibleFill;"), v("visibleStroke", "pointer-events: visibleStroke;"), v("visible", "pointer-events: visible;"), v("painted", "pointer-events: painted;"), v("fill", "pointer-events: fill;"), v("stroke", "pointer-events: stroke;"), v("all", "pointer-events: all;"), v("none", "pointer-events: none;"), ], }, { number: 414, name: "resize", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eresize\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets whether an element is resizable, and if so, in which directions.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | \"both\" | \"horizontal\" | \"vertical\" | \"block\" | \"inline\"", ebnf: "resize =\n \"none\" | \"both\" | \"horizontal\" | \"vertical\" | \"block\" | \"inline\"", valueType: "keyword", defaultValue: "both", related: [], provenance: "pure", truncated: false, trueCount: 6, shown: 6, assists: [], values: [ v("none", "resize: none;"), v("both", "resize: both;"), v("horizontal", "resize: horizontal;"), v("vertical", "resize: vertical;"), v("block", "resize: block;"), v("inline", "resize: inline;"), ], }, { number: 415, name: "touch-action", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003etouch-action\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"none\" | ( [ ( \"pan-x\" | \"pan-left\" | \"pan-right\" ) ] , [ ( \"pan-y\" | \"pan-up\" | \"pan-down\" ) ] , [ \"pinch-zoom\" ] ) | \"manipulation\"", ebnf: "touch-action =\n \"auto\" | \"none\" | ( [ ( \"pan-x\" | \"pan-left\" | \"pan-right\" ) ] , [ ( \"pan-y\" | \"pan-up\" | \"pan-down\" ) ] , [ \"pinch-zoom\" ] ) | \"manipulation\"", valueType: "keyword", defaultValue: "none", related: [], provenance: "pure", truncated: false, trueCount: 34, shown: 34, assists: [], values: [ v("auto", "touch-action: auto;"), v("none", "touch-action: none;"), v("pan-x pan-y pinch-zoom", "touch-action: pan-x pan-y pinch-zoom;"), v("pan-x pan-y", "touch-action: pan-x pan-y;"), v("pan-x pan-up pinch-zoom", "touch-action: pan-x pan-up pinch-zoom;"), v("pan-x pan-up", "touch-action: pan-x pan-up;"), v("pan-x pan-down pinch-zoom", "touch-action: pan-x pan-down pinch-zoom;"), v("pan-x pan-down", "touch-action: pan-x pan-down;"), v("pan-x pinch-zoom", "touch-action: pan-x pinch-zoom;"), v("pan-x", "touch-action: pan-x;"), v("pan-left pan-y pinch-zoom", "touch-action: pan-left pan-y pinch-zoom;"), v("pan-left pan-y", "touch-action: pan-left pan-y;"), v("pan-left pan-up pinch-zoom", "touch-action: pan-left pan-up pinch-zoom;"), v("pan-left pan-up", "touch-action: pan-left pan-up;"), v("pan-left pan-down pinch-zoom", "touch-action: pan-left pan-down pinch-zoom;"), v("pan-left pan-down", "touch-action: pan-left pan-down;"), v("pan-left pinch-zoom", "touch-action: pan-left pinch-zoom;"), v("pan-left", "touch-action: pan-left;"), v("pan-right pan-y pinch-zoom", "touch-action: pan-right pan-y pinch-zoom;"), v("pan-right pan-y", "touch-action: pan-right pan-y;"), v("pan-right pan-up pinch-zoom", "touch-action: pan-right pan-up pinch-zoom;"), v("pan-right pan-up", "touch-action: pan-right pan-up;"), v("pan-right pan-down pinch-zoom", "touch-action: pan-right pan-down pinch-zoom;"), v("pan-right pan-down", "touch-action: pan-right pan-down;"), v("pan-right pinch-zoom", "touch-action: pan-right pinch-zoom;"), v("pan-right", "touch-action: pan-right;"), v("pan-y pinch-zoom", "touch-action: pan-y pinch-zoom;"), v("pan-y", "touch-action: pan-y;"), v("pan-up pinch-zoom", "touch-action: pan-up pinch-zoom;"), v("pan-up", "touch-action: pan-up;"), v("pan-down pinch-zoom", "touch-action: pan-down pinch-zoom;"), v("pan-down", "touch-action: pan-down;"), v("pinch-zoom", "touch-action: pinch-zoom;"), v("manipulation", "touch-action: manipulation;"), ], }, { number: 416, name: "user-select", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003euser-select\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property controls whether the user can select text. This doesn't have any effect on content loaded as part of a browser's user interface (its \u003ca href=\"/en-US/docs/Glossary/Chrome\"\u003echrome\u003c/a\u003e), except in textboxes.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"text\" | \"none\" | \"contain\" | \"all\"", ebnf: "user-select =\n \"auto\" | \"text\" | \"none\" | \"contain\" | \"all\"", valueType: "keyword", defaultValue: "text", related: [], provenance: "pure", truncated: false, trueCount: 5, shown: 5, assists: [], values: [ v("auto", "user-select: auto;"), v("text", "user-select: text;"), v("none", "user-select: none;"), v("contain", "user-select: contain;"), v("all", "user-select: all;"), ], }, ], }, { id: "containment", sigil: "26", title: "Containment \u0026 Performance", blurb: "Hints that isolate subtrees so the engine can skip work.", demo: "generic", sampleKind: "box", group: "families", focus: false, gallery: false, count: 6, properties: [ { number: 417, name: "contain", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003econtain\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property indicates that an element and its contents are, as much as possible, independent from the rest of the document tree. Containment enables isolating a subsection of the DOM, providing performance benefits by limiting calculations of layout, style, paint, size, or any combination to a DOM subtree rather than the entire page. Containment can also be used to scope CSS counters and quotes.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | \"strict\" | \"content\"\n | ContainPropSizeItem , [ \"layout\" , [ \"style\" , [ \"paint\" ] | \"paint\" , [ \"style\" ] ] | \"style\" , [ \"layout\" , [ \"paint\" ] | \"paint\" , [ \"layout\" ] ] | \"paint\" , [ \"layout\" , [ \"style\" ] | \"style\" , [ \"layout\" ] ] ]\n | \"layout\" , [ ContainPropSizeItem , [ \"style\" , [ \"paint\" ] | \"paint\" , [ \"style\" ] ] | \"style\" , [ ContainPropSizeItem , [ \"paint\" ] | \"paint\" , [ ContainPropSizeItem ] ] | \"paint\" , [ ContainPropSizeItem , [ \"style\" ] | \"style\" , [ ContainPropSizeItem ] ] ]\n | \"style\" , [ ContainPropSizeItem , [ \"layout\" , [ \"paint\" ] | \"paint\" , [ \"layout\" ] ] | \"layout\" , [ ContainPropSizeItem , [ \"paint\" ] | \"paint\" , [ ContainPropSizeItem ] ] | \"paint\" , [ ContainPropSizeItem , [ \"layout\" ] | \"layout\" , [ ContainPropSizeItem ] ] ]\n | \"paint\" , [ ContainPropSizeItem , [ \"layout\" , [ \"style\" ] | \"style\" , [ \"layout\" ] ] | \"layout\" , [ ContainPropSizeItem , [ \"style\" ] | \"style\" , [ ContainPropSizeItem ] ] | \"style\" , [ ContainPropSizeItem , [ \"layout\" ] | \"layout\" , [ ContainPropSizeItem ] ] ]", ebnf: "contain =\n \"none\" | \"strict\" | \"content\"\n | ContainPropSizeItem , [ \"layout\" , [ \"style\" , [ \"paint\" ] | \"paint\" , [ \"style\" ] ] | \"style\" , [ \"layout\" , [ \"paint\" ] | \"paint\" , [ \"layout\" ] ] | \"paint\" , [ \"layout\" , [ \"style\" ] | \"style\" , [ \"layout\" ] ] ]\n | \"layout\" , [ ContainPropSizeItem , [ \"style\" , [ \"paint\" ] | \"paint\" , [ \"style\" ] ] | \"style\" , [ ContainPropSizeItem , [ \"paint\" ] | \"paint\" , [ ContainPropSizeItem ] ] | \"paint\" , [ ContainPropSizeItem , [ \"style\" ] | \"style\" , [ ContainPropSizeItem ] ] ]\n | \"style\" , [ ContainPropSizeItem , [ \"layout\" , [ \"paint\" ] | \"paint\" , [ \"layout\" ] ] | \"layout\" , [ ContainPropSizeItem , [ \"paint\" ] | \"paint\" , [ ContainPropSizeItem ] ] | \"paint\" , [ ContainPropSizeItem , [ \"layout\" ] | \"layout\" , [ ContainPropSizeItem ] ] ]\n | \"paint\" , [ ContainPropSizeItem , [ \"layout\" , [ \"style\" ] | \"style\" , [ \"layout\" ] ] | \"layout\" , [ ContainPropSizeItem , [ \"style\" ] | \"style\" , [ ContainPropSizeItem ] ] | \"style\" , [ ContainPropSizeItem , [ \"layout\" ] | \"layout\" , [ ContainPropSizeItem ] ] ]", valueType: "keyword", defaultValue: "strict", related: [], provenance: "pure", truncated: false, trueCount: 116, shown: 50, assists: [], values: [ v("none", "contain: none;"), v("strict", "contain: strict;"), v("content", "contain: content;"), v("size layout style paint", "contain: size layout style paint;"), v("size layout style", "contain: size layout style;"), v("size layout paint style", "contain: size layout paint style;"), v("size layout paint", "contain: size layout paint;"), v("size layout", "contain: size layout;"), v("size style layout paint", "contain: size style layout paint;"), v("size style layout", "contain: size style layout;"), v("size style paint layout", "contain: size style paint layout;"), v("size style paint", "contain: size style paint;"), v("size style", "contain: size style;"), v("size paint layout style", "contain: size paint layout style;"), v("size paint layout", "contain: size paint layout;"), v("size paint style layout", "contain: size paint style layout;"), v("size paint style", "contain: size paint style;"), v("size paint", "contain: size paint;"), v("size", "contain: size;"), v("inline-size layout style paint", "contain: inline-size layout style paint;"), v("inline-size layout style", "contain: inline-size layout style;"), v("inline-size layout paint style", "contain: inline-size layout paint style;"), v("inline-size layout paint", "contain: inline-size layout paint;"), v("inline-size layout", "contain: inline-size layout;"), v("inline-size style layout paint", "contain: inline-size style layout paint;"), v("inline-size style layout", "contain: inline-size style layout;"), v("inline-size style paint layout", "contain: inline-size style paint layout;"), v("inline-size style paint", "contain: inline-size style paint;"), v("inline-size style", "contain: inline-size style;"), v("inline-size paint layout style", "contain: inline-size paint layout style;"), v("inline-size paint layout", "contain: inline-size paint layout;"), v("inline-size paint style layout", "contain: inline-size paint style layout;"), v("inline-size paint style", "contain: inline-size paint style;"), v("inline-size paint", "contain: inline-size paint;"), v("inline-size", "contain: inline-size;"), v("layout size style paint", "contain: layout size style paint;"), v("layout size style", "contain: layout size style;"), v("layout size paint style", "contain: layout size paint style;"), v("layout size paint", "contain: layout size paint;"), v("layout size", "contain: layout size;"), v("layout inline-size style paint", "contain: layout inline-size style paint;"), v("layout inline-size style", "contain: layout inline-size style;"), v("layout inline-size paint style", "contain: layout inline-size paint style;"), v("layout inline-size paint", "contain: layout inline-size paint;"), v("layout inline-size", "contain: layout inline-size;"), v("layout style size paint", "contain: layout style size paint;"), v("layout style size", "contain: layout style size;"), v("layout style inline-size paint", "contain: layout style inline-size paint;"), v("layout style inline-size", "contain: layout style inline-size;"), v("layout style paint size", "contain: layout style paint size;"), ], }, { number: 418, name: "container", maturity: "modern", description: "The \u003cstrong\u003econtainer\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property establishes the element as a query container and specifies the name and type of the \u003ca href=\"/en-US/docs/Web/CSS/Guides/Containment/Container_queries#naming_containment_contexts\"\u003econtainment context\u003c/a\u003e used in a \u003ca href=\"/en-US/docs/Web/CSS/Guides/Containment/Container_queries\"\u003econtainer query\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ContainerNameProp , [ \"/\" , ContainerTypeProp ]", ebnf: "container =\n ContainerNameProp , [ \"/\" , ContainerTypeProp ]", valueType: "keyword", defaultValue: "none/ size scroll-state", related: [], provenance: "assisted", truncated: false, trueCount: 27, shown: 27, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }], values: [ v("none/ normal", "container: none/ normal;"), v("none/ size scroll-state", "container: none/ size scroll-state;"), v("none/ size", "container: none/ size;"), v("none/ inline-size scroll-state", "container: none/ inline-size scroll-state;"), v("none/ inline-size", "container: none/ inline-size;"), v("none/ scroll-state size", "container: none/ scroll-state size;"), v("none/ scroll-state inline-size", "container: none/ scroll-state inline-size;"), v("none/ scroll-state", "container: none/ scroll-state;"), v("none", "container: none;"), v("my-ident/ normal", "container: my-ident/ normal;"), v("my-ident/ size scroll-state", "container: my-ident/ size scroll-state;"), v("my-ident/ size", "container: my-ident/ size;"), v("my-ident/ inline-size scroll-state", "container: my-ident/ inline-size scroll-state;"), v("my-ident/ inline-size", "container: my-ident/ inline-size;"), v("my-ident/ scroll-state size", "container: my-ident/ scroll-state size;"), v("my-ident/ scroll-state inline-size", "container: my-ident/ scroll-state inline-size;"), v("my-ident/ scroll-state", "container: my-ident/ scroll-state;"), v("my-ident", "container: my-ident;"), v("tag-a/ normal", "container: tag-a/ normal;"), v("tag-a/ size scroll-state", "container: tag-a/ size scroll-state;"), v("tag-a/ size", "container: tag-a/ size;"), v("tag-a/ inline-size scroll-state", "container: tag-a/ inline-size scroll-state;"), v("tag-a/ inline-size", "container: tag-a/ inline-size;"), v("tag-a/ scroll-state size", "container: tag-a/ scroll-state size;"), v("tag-a/ scroll-state inline-size", "container: tag-a/ scroll-state inline-size;"), v("tag-a/ scroll-state", "container: tag-a/ scroll-state;"), v("tag-a", "container: tag-a;"), ], }, { number: 419, name: "container-name", maturity: "modern", description: "The \u003cstrong\u003econtainer-name\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies a list of query container names used by the \u003ca href=\"/en-US/docs/Web/CSS/Reference/At-rules/@container\"\u003e@container\u003c/a\u003e at-rule in a \u003ca href=\"/en-US/docs/Web/CSS/Guides/Containment/Container_queries\"\u003econtainer query\u003c/a\u003e. A container query will apply styles to elements based on the \u003ca href=\"/en-US/docs/Web/CSS/Guides/Containment/Container_size_and_style_queries#container_size_queries\"\u003esize\u003c/a\u003e or \u003ca href=\"/en-US/docs/Web/CSS/Guides/Conditional_rules/Container_scroll-state_queries\"\u003escroll-state\u003c/a\u003e of the nearest ancestor with a containment context. When a containment context is given a name, it can be specifically targeted using the \u003ca href=\"/en-US/docs/Web/CSS/Reference/At-rules/@container\"\u003e\u003ccode\u003e@container\u003c/code\u003e\u003c/a\u003e at-rule instead of the nearest ancestor with containment.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | custom_ident_type , { custom_ident_type }", ebnf: "container-name =\n \"none\" | custom_ident_type , { custom_ident_type }", valueType: "keyword", defaultValue: "my-ident", related: [], provenance: "assisted", truncated: false, trueCount: 3, shown: 3, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }], values: [ v("none", "container-name: none;"), v("my-ident", "container-name: my-ident;"), v("tag-a", "container-name: tag-a;"), ], }, { number: 420, name: "container-type", maturity: "modern", description: "An element can be established as a query container using the \u003cstrong\u003e\u003ccode\u003econtainer-type\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property. \u003ccode\u003econtainer-type\u003c/code\u003e is used to define the type of container context used in a container query. The available container contexts are:", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | ( \"size\" | \"inline-size\" ) , [ \"scroll-state\" ] | \"scroll-state\" , [ ( \"size\" | \"inline-size\" ) ]", ebnf: "container-type =\n \"normal\" | ( \"size\" | \"inline-size\" ) , [ \"scroll-state\" ] | \"scroll-state\" , [ ( \"size\" | \"inline-size\" ) ]", valueType: "keyword", defaultValue: "size scroll-state", related: [], provenance: "pure", truncated: false, trueCount: 8, shown: 8, assists: [], values: [ v("normal", "container-type: normal;"), v("size scroll-state", "container-type: size scroll-state;"), v("size", "container-type: size;"), v("inline-size scroll-state", "container-type: inline-size scroll-state;"), v("inline-size", "container-type: inline-size;"), v("scroll-state size", "container-type: scroll-state size;"), v("scroll-state inline-size", "container-type: scroll-state inline-size;"), v("scroll-state", "container-type: scroll-state;"), ], }, { number: 421, name: "content-visibility", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003econtent-visibility\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed. It enables the user agent to skip an element's rendering work (including layout and painting) until it is needed — which makes the initial page load much faster.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"visible\" | \"auto\" | \"hidden\"", ebnf: "content-visibility =\n \"visible\" | \"auto\" | \"hidden\"", valueType: "keyword", defaultValue: "auto", related: [], provenance: "pure", truncated: false, trueCount: 3, shown: 3, assists: [], values: [ v("visible", "content-visibility: visible;"), v("auto", "content-visibility: auto;"), v("hidden", "content-visibility: hidden;"), ], }, { number: 422, name: "will-change", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ewill-change\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property hints to browsers how an element is expected to change. Browsers may set up optimizations before an element is actually changed. These kinds of optimizations can increase the responsiveness of a page by doing potentially expensive work before they are actually required.", experimental: false, nonstandard: false, deprecated: false, warning: "\u003cstrong\u003eWarning:\u003c/strong\u003e \u003ccode\u003ewill-change\u003c/code\u003e is intended to be used as a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems.", syntax: "\"auto\" | AnimateableFeatureType , { \",\" , AnimateableFeatureType }", ebnf: "will-change =\n \"auto\" | AnimateableFeatureType , { \",\" , AnimateableFeatureType }", valueType: "keyword", defaultValue: "scroll-position", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }], values: [ v("auto", "will-change: auto;"), v("scroll-position", "will-change: scroll-position;"), v("contents", "will-change: contents;"), v("my-ident", "will-change: my-ident;"), v("tag-a", "will-change: tag-a;"), ], }, ], }, { id: "container-queries", sigil: "27", title: "Container Queries", blurb: "Turn an element into a query container for its descendants.", demo: "generic", sampleKind: "box", group: "families", focus: false, gallery: false, count: 0, properties: [ ], }, { id: "anchor", sigil: "28", title: "Anchor Positioning", blurb: "Tether a positioned element to one or more anchors.", demo: "generic", sampleKind: "box", group: "families", focus: false, gallery: false, count: 8, properties: [ { number: 423, name: "anchor-name", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eanchor-name\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property enables defining an element as an \u003cstrong\u003eanchor element\u003c/strong\u003e by giving it one or more identifying \u003cstrong\u003eanchor names\u003c/strong\u003e. Each name can then be set as the value of a positioned element's \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/position-anchor\"\u003e\u003ccode\u003eposition-anchor\u003c/code\u003e\u003c/a\u003e property to associate it with the anchor.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | AnchorNameType , { \",\" , AnchorNameType }", ebnf: "anchor-name =\n \"none\" | AnchorNameType , { \",\" , AnchorNameType }", valueType: "keyword", defaultValue: "--my-var", related: [], provenance: "assisted", truncated: false, trueCount: 2, shown: 2, assists: [{ type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }], values: [ v("none", "anchor-name: none;"), v("--my-var", "anchor-name: --my-var;"), ], }, { number: 424, name: "anchor-scope", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eanchor-scope\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property can be used to limit the scope in which a positioned element can be associated with anchor elements to a particular subtree.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | \"all\" | AnchorNameType , { \",\" , AnchorNameType }", ebnf: "anchor-scope =\n \"none\" | \"all\" | AnchorNameType , { \",\" , AnchorNameType }", valueType: "keyword", defaultValue: "all", related: [], provenance: "assisted", truncated: false, trueCount: 3, shown: 3, assists: [{ type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }], values: [ v("none", "anchor-scope: none;"), v("all", "anchor-scope: all;"), v("--my-var", "anchor-scope: --my-var;"), ], }, { number: 425, name: "position-anchor", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eposition-anchor\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the default \u003cstrong\u003eanchor element\u003c/strong\u003e for a positioned element. This default is used by \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/position-area\"\u003e\u003ccode\u003eposition-area\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/position-try\"\u003e\u003ccode\u003eposition-try\u003c/code\u003e\u003c/a\u003e, and by anchor functions (\u003ca href=\"/en-US/docs/Web/CSS/Reference/Values/anchor\"\u003e\u003ccode\u003eanchor()\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Values/anchor-size\"\u003e\u003ccode\u003eanchor-size()\u003c/code\u003e\u003c/a\u003e) when no \u003ccode\u003e\u0026lt;anchor-name\u0026gt;\u003c/code\u003e argument is provided to those functions.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | \"none\" | \"auto\" | AnchorNameType | \"match-parent\"", ebnf: "position-anchor =\n \"normal\" | \"none\" | \"auto\" | AnchorNameType | \"match-parent\"", valueType: "keyword", defaultValue: "none", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }], values: [ v("normal", "position-anchor: normal;"), v("none", "position-anchor: none;"), v("auto", "position-anchor: auto;"), v("--my-var", "position-anchor: --my-var;"), v("match-parent", "position-anchor: match-parent;"), ], }, { number: 426, name: "position-area", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eposition-area\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property enables an anchor-positioned element to be positioned relative to the edges of its associated anchor element by placing the positioned element on one or more tiles of an implicit 3x3 grid, where the anchoring element is the center cell.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | PositionAreaType", ebnf: "position-area =\n \"none\" | PositionAreaType", valueType: "keyword", defaultValue: "left top", related: [], provenance: "pure", truncated: true, trueCount: 161, shown: 50, assists: [], values: [ v("none", "position-area: none;"), v("left top", "position-area: left top;"), v("left center", "position-area: left center;"), v("left bottom", "position-area: left bottom;"), v("left span-top", "position-area: left span-top;"), v("left span-bottom", "position-area: left span-bottom;"), v("left y-start", "position-area: left y-start;"), v("left y-end", "position-area: left y-end;"), v("left span-y-start", "position-area: left span-y-start;"), v("left span-y-end", "position-area: left span-y-end;"), v("left self-y-start", "position-area: left self-y-start;"), v("left self-y-end", "position-area: left self-y-end;"), v("left span-self-y-start", "position-area: left span-self-y-start;"), v("left span-self-y-end", "position-area: left span-self-y-end;"), v("left span-all", "position-area: left span-all;"), v("left", "position-area: left;"), v("center top", "position-area: center top;"), v("center center", "position-area: center center;"), v("center bottom", "position-area: center bottom;"), v("center span-top", "position-area: center span-top;"), v("center span-bottom", "position-area: center span-bottom;"), v("center y-start", "position-area: center y-start;"), v("center y-end", "position-area: center y-end;"), v("center span-y-start", "position-area: center span-y-start;"), v("center span-y-end", "position-area: center span-y-end;"), v("center self-y-start", "position-area: center self-y-start;"), v("center self-y-end", "position-area: center self-y-end;"), v("center span-self-y-start", "position-area: center span-self-y-start;"), v("center span-self-y-end", "position-area: center span-self-y-end;"), v("center span-all", "position-area: center span-all;"), v("center", "position-area: center;"), v("right top", "position-area: right top;"), v("right center", "position-area: right center;"), v("right bottom", "position-area: right bottom;"), v("right span-top", "position-area: right span-top;"), v("right span-bottom", "position-area: right span-bottom;"), v("right y-start", "position-area: right y-start;"), v("right y-end", "position-area: right y-end;"), v("right span-y-start", "position-area: right span-y-start;"), v("right span-y-end", "position-area: right span-y-end;"), v("right self-y-start", "position-area: right self-y-start;"), v("right self-y-end", "position-area: right self-y-end;"), v("right span-self-y-start", "position-area: right span-self-y-start;"), v("right span-self-y-end", "position-area: right span-self-y-end;"), v("right span-all", "position-area: right span-all;"), v("right", "position-area: right;"), v("span-left top", "position-area: span-left top;"), v("span-left center", "position-area: span-left center;"), v("span-left bottom", "position-area: span-left bottom;"), v("span-left span-top", "position-area: span-left span-top;"), ], }, { number: 427, name: "position-try", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eposition-try\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property is a shorthand that corresponds to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/position-try-order\"\u003e\u003ccode\u003eposition-try-order\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/position-try-fallbacks\"\u003e\u003ccode\u003eposition-try-fallbacks\u003c/code\u003e\u003c/a\u003e properties.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "[ PositionTryOrderProp ] , PositionTryFallbacksProp", ebnf: "position-try =\n [ PositionTryOrderProp ] , PositionTryFallbacksProp", valueType: "keyword", defaultValue: "normal --my-var flip-block", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }], values: [ v("normal none", "position-try: normal none;"), v("normal --my-var flip-block", "position-try: normal --my-var flip-block;"), v("normal --my-var flip-inline", "position-try: normal --my-var flip-inline;"), v("normal --my-var flip-start", "position-try: normal --my-var flip-start;"), v("normal --my-var flip-x", "position-try: normal --my-var flip-x;"), v("normal --my-var flip-y", "position-try: normal --my-var flip-y;"), v("normal --my-var flip-block flip-inline", "position-try: normal --my-var flip-block flip-inline;"), v("normal --my-var flip-start flip-x", "position-try: normal --my-var flip-start flip-x;"), v("normal --my-var", "position-try: normal --my-var;"), v("normal flip-block", "position-try: normal flip-block;"), v("normal flip-inline", "position-try: normal flip-inline;"), v("normal flip-start", "position-try: normal flip-start;"), v("normal flip-x", "position-try: normal flip-x;"), v("normal flip-y", "position-try: normal flip-y;"), v("normal flip-block flip-inline", "position-try: normal flip-block flip-inline;"), v("normal flip-start flip-x", "position-try: normal flip-start flip-x;"), v("normal", "position-try: normal;"), v("normal left top", "position-try: normal left top;"), v("normal left center", "position-try: normal left center;"), v("normal left bottom", "position-try: normal left bottom;"), v("normal left span-top", "position-try: normal left span-top;"), v("normal left span-bottom", "position-try: normal left span-bottom;"), v("normal left y-start", "position-try: normal left y-start;"), v("normal left y-end", "position-try: normal left y-end;"), v("normal left span-y-start", "position-try: normal left span-y-start;"), v("normal left span-y-end", "position-try: normal left span-y-end;"), v("normal left self-y-start", "position-try: normal left self-y-start;"), v("normal left self-y-end", "position-try: normal left self-y-end;"), v("normal left span-self-y-start", "position-try: normal left span-self-y-start;"), v("normal left span-self-y-end", "position-try: normal left span-self-y-end;"), v("normal left span-all", "position-try: normal left span-all;"), v("normal left", "position-try: normal left;"), v("normal center top", "position-try: normal center top;"), v("normal center center", "position-try: normal center center;"), v("normal center bottom", "position-try: normal center bottom;"), v("normal center span-top", "position-try: normal center span-top;"), v("normal center span-bottom", "position-try: normal center span-bottom;"), v("normal center y-start", "position-try: normal center y-start;"), v("normal center y-end", "position-try: normal center y-end;"), v("normal center span-y-start", "position-try: normal center span-y-start;"), v("normal center span-y-end", "position-try: normal center span-y-end;"), v("normal center self-y-start", "position-try: normal center self-y-start;"), v("normal center self-y-end", "position-try: normal center self-y-end;"), v("normal center span-self-y-start", "position-try: normal center span-self-y-start;"), v("normal center span-self-y-end", "position-try: normal center span-self-y-end;"), v("normal center span-all", "position-try: normal center span-all;"), v("normal center", "position-try: normal center;"), v("normal right top", "position-try: normal right top;"), v("normal right center", "position-try: normal right center;"), v("normal right bottom", "position-try: normal right bottom;"), ], }, { number: 428, name: "position-try-fallbacks", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eposition-try-fallbacks\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property enables you to specify a list of one or more alternative \u003cstrong\u003eposition try fallback options\u003c/strong\u003e for anchor-positioned elements to be placed relative to their associated anchor elements. When the element would otherwise overflow its inset-modified containing block, the browser will try placing the positioned element in these different fallback positions, in the order provided, until it finds a value that stops it from overflowing its container or the viewport.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | PositionTryFallbacksPropItem , { \",\" , PositionTryFallbacksPropItem }", ebnf: "position-try-fallbacks =\n \"none\" | PositionTryFallbacksPropItem , { \",\" , PositionTryFallbacksPropItem }", valueType: "keyword", defaultValue: "--my-var flip-block", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }], values: [ v("none", "position-try-fallbacks: none;"), v("--my-var flip-block", "position-try-fallbacks: --my-var flip-block;"), v("--my-var flip-inline", "position-try-fallbacks: --my-var flip-inline;"), v("--my-var flip-start", "position-try-fallbacks: --my-var flip-start;"), v("--my-var flip-x", "position-try-fallbacks: --my-var flip-x;"), v("--my-var flip-y", "position-try-fallbacks: --my-var flip-y;"), v("--my-var flip-block flip-inline", "position-try-fallbacks: --my-var flip-block flip-inline;"), v("--my-var flip-start flip-x", "position-try-fallbacks: --my-var flip-start flip-x;"), v("--my-var", "position-try-fallbacks: --my-var;"), v("flip-block", "position-try-fallbacks: flip-block;"), v("flip-inline", "position-try-fallbacks: flip-inline;"), v("flip-start", "position-try-fallbacks: flip-start;"), v("flip-x", "position-try-fallbacks: flip-x;"), v("flip-y", "position-try-fallbacks: flip-y;"), v("flip-block flip-inline", "position-try-fallbacks: flip-block flip-inline;"), v("flip-start flip-x", "position-try-fallbacks: flip-start flip-x;"), v("left top", "position-try-fallbacks: left top;"), v("left center", "position-try-fallbacks: left center;"), v("left bottom", "position-try-fallbacks: left bottom;"), v("left span-top", "position-try-fallbacks: left span-top;"), v("left span-bottom", "position-try-fallbacks: left span-bottom;"), v("left y-start", "position-try-fallbacks: left y-start;"), v("left y-end", "position-try-fallbacks: left y-end;"), v("left span-y-start", "position-try-fallbacks: left span-y-start;"), v("left span-y-end", "position-try-fallbacks: left span-y-end;"), v("left self-y-start", "position-try-fallbacks: left self-y-start;"), v("left self-y-end", "position-try-fallbacks: left self-y-end;"), v("left span-self-y-start", "position-try-fallbacks: left span-self-y-start;"), v("left span-self-y-end", "position-try-fallbacks: left span-self-y-end;"), v("left span-all", "position-try-fallbacks: left span-all;"), v("left", "position-try-fallbacks: left;"), v("center top", "position-try-fallbacks: center top;"), v("center center", "position-try-fallbacks: center center;"), v("center bottom", "position-try-fallbacks: center bottom;"), v("center span-top", "position-try-fallbacks: center span-top;"), v("center span-bottom", "position-try-fallbacks: center span-bottom;"), v("center y-start", "position-try-fallbacks: center y-start;"), v("center y-end", "position-try-fallbacks: center y-end;"), v("center span-y-start", "position-try-fallbacks: center span-y-start;"), v("center span-y-end", "position-try-fallbacks: center span-y-end;"), v("center self-y-start", "position-try-fallbacks: center self-y-start;"), v("center self-y-end", "position-try-fallbacks: center self-y-end;"), v("center span-self-y-start", "position-try-fallbacks: center span-self-y-start;"), v("center span-self-y-end", "position-try-fallbacks: center span-self-y-end;"), v("center span-all", "position-try-fallbacks: center span-all;"), v("center", "position-try-fallbacks: center;"), v("right top", "position-try-fallbacks: right top;"), v("right center", "position-try-fallbacks: right center;"), v("right bottom", "position-try-fallbacks: right bottom;"), v("right span-top", "position-try-fallbacks: right span-top;"), ], }, { number: 429, name: "position-try-order", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eposition-try-order\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property allows you to specify various fallback options that result in an available position-try fallback being used to set an anchor-positioned element's position, instead of its initial position settings.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | TrySizeType", ebnf: "position-try-order =\n \"normal\" | TrySizeType", valueType: "keyword", defaultValue: "most-width", related: [], provenance: "pure", truncated: false, trueCount: 5, shown: 5, assists: [], values: [ v("normal", "position-try-order: normal;"), v("most-width", "position-try-order: most-width;"), v("most-height", "position-try-order: most-height;"), v("most-block-size", "position-try-order: most-block-size;"), v("most-inline-size", "position-try-order: most-inline-size;"), ], }, { number: 430, name: "position-visibility", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eposition-visibility\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property enables conditionally hiding an anchor-positioned element depending on, for example, whether it is overflowing its containing element or the viewport.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"always\"\n | \"anchors-valid\"\n | \"anchors-visible\"\n | \"no-overflow\"\n | \"anchors-valid\" , \"anchors-visible\"\n | \"anchors-visible\" , \"no-overflow\"\n | \"anchors-valid\" , \"anchors-visible\" , \"no-overflow\"", ebnf: "position-visibility =\n \"always\"\n | \"anchors-valid\"\n | \"anchors-visible\"\n | \"no-overflow\"\n | \"anchors-valid\" , \"anchors-visible\"\n | \"anchors-visible\" , \"no-overflow\"\n | \"anchors-valid\" , \"anchors-visible\" , \"no-overflow\"", valueType: "keyword", defaultValue: "anchors-valid", related: [], provenance: "pure", truncated: false, trueCount: 7, shown: 7, assists: [], values: [ v("always", "position-visibility: always;"), v("anchors-valid", "position-visibility: anchors-valid;"), v("anchors-visible", "position-visibility: anchors-visible;"), v("no-overflow", "position-visibility: no-overflow;"), v("anchors-valid anchors-visible", "position-visibility: anchors-valid anchors-visible;"), v("anchors-visible no-overflow", "position-visibility: anchors-visible no-overflow;"), v("anchors-valid anchors-visible no-overflow", "position-visibility: anchors-valid anchors-visible no-overflow;"), ], }, ], }, { id: "offset", sigil: "29", title: "Offset / Motion Path", blurb: "Move an element along an arbitrary path.", demo: "generic", sampleKind: "box", group: "families", focus: false, gallery: false, count: 6, properties: [ { number: 431, name: "offset", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eoffset\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand property\u003c/a\u003e sets all the properties required for animating an element along a defined path. The offset properties together help to define an \u003cem\u003eoffset transform\u003c/em\u003e, a \u003ca href=\"/en-US/docs/Web/CSS/Guides/Transforms/Using\"\u003etransform\u003c/a\u003e that aligns a point in an element (\u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/offset-anchor\"\u003eoffset-anchor\u003c/a\u003e) to an \u003cem\u003eoffset position\u003c/em\u003e (\u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/offset-position\"\u003eoffset-position\u003c/a\u003e) on a path (\u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/offset-path\"\u003eoffset-path\u003c/a\u003e) at various points along the path (\u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/offset-distance\"\u003eoffset-distance\u003c/a\u003e) and optionally rotates the element (\u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/offset-rotate\"\u003eoffset-rotate\u003c/a\u003e) to follow the direction of the path.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" , OffsetPathProp , \"50%\" , \"auto 45deg\" , \"/\" , \"center\"\n | OffsetPathProp , \"50%\"\n | OffsetPositionProp", ebnf: "offset =\n \"normal\" , OffsetPathProp , \"50%\" , \"auto 45deg\" , \"/\" , \"center\"\n | OffsetPathProp , \"50%\"\n | OffsetPositionProp", valueType: "angle", defaultValue: "normal ray(45deg closest-corner contain at left) content-box 50% auto 45deg/ center", related: [], provenance: "assisted", truncated: true, trueCount: 310, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "BasicShapeType", samples: ["circle(44%)", "ellipse(48% 32%)", "inset(14% round 14px)", "polygon(50% 4%, 96% 96%, 4% 96%)"] }, { type: "UrlType", samples: ["url(assets/photo.jpg)"] }], values: [ v("normal none 50% auto 45deg/ center", "offset: normal none 50% auto 45deg/ center;"), v("normal ray(45deg closest-corner contain at left) content-box 50% auto 45deg/ center", "offset: normal ray(45deg closest-corner contain at left) content-box 50% auto 45deg/ center;"), v("normal ray(45deg closest-corner contain at left) padding-box 50% auto 45deg/ center", "offset: normal ray(45deg closest-corner contain at left) padding-box 50% auto 45deg/ center;"), v("normal ray(45deg closest-corner contain at left) border-box 50% auto 45deg/ center", "offset: normal ray(45deg closest-corner contain at left) border-box 50% auto 45deg/ center;"), v("normal ray(45deg closest-corner contain at left) fill-box 50% auto 45deg/ center", "offset: normal ray(45deg closest-corner contain at left) fill-box 50% auto 45deg/ center;"), v("normal ray(45deg closest-corner contain at left) stroke-box 50% auto 45deg/ center", "offset: normal ray(45deg closest-corner contain at left) stroke-box 50% auto 45deg/ center;"), v("normal ray(45deg closest-corner contain at left) view-box 50% auto 45deg/ center", "offset: normal ray(45deg closest-corner contain at left) view-box 50% auto 45deg/ center;"), v("normal ray(45deg closest-corner contain at left) 50% auto 45deg/ center", "offset: normal ray(45deg closest-corner contain at left) 50% auto 45deg/ center;"), v("normal url(assets/photo.jpg) content-box 50% auto 45deg/ center", "offset: normal url(assets/photo.jpg) content-box 50% auto 45deg/ center;"), v("normal url(assets/photo.jpg) padding-box 50% auto 45deg/ center", "offset: normal url(assets/photo.jpg) padding-box 50% auto 45deg/ center;"), v("normal url(assets/photo.jpg) border-box 50% auto 45deg/ center", "offset: normal url(assets/photo.jpg) border-box 50% auto 45deg/ center;"), v("normal url(assets/photo.jpg) fill-box 50% auto 45deg/ center", "offset: normal url(assets/photo.jpg) fill-box 50% auto 45deg/ center;"), v("normal url(assets/photo.jpg) stroke-box 50% auto 45deg/ center", "offset: normal url(assets/photo.jpg) stroke-box 50% auto 45deg/ center;"), v("normal url(assets/photo.jpg) view-box 50% auto 45deg/ center", "offset: normal url(assets/photo.jpg) view-box 50% auto 45deg/ center;"), v("normal url(assets/photo.jpg) 50% auto 45deg/ center", "offset: normal url(assets/photo.jpg) 50% auto 45deg/ center;"), v("normal circle(44%) content-box 50% auto 45deg/ center", "offset: normal circle(44%) content-box 50% auto 45deg/ center;"), v("normal circle(44%) padding-box 50% auto 45deg/ center", "offset: normal circle(44%) padding-box 50% auto 45deg/ center;"), v("normal circle(44%) border-box 50% auto 45deg/ center", "offset: normal circle(44%) border-box 50% auto 45deg/ center;"), v("normal circle(44%) fill-box 50% auto 45deg/ center", "offset: normal circle(44%) fill-box 50% auto 45deg/ center;"), v("normal circle(44%) stroke-box 50% auto 45deg/ center", "offset: normal circle(44%) stroke-box 50% auto 45deg/ center;"), v("normal circle(44%) view-box 50% auto 45deg/ center", "offset: normal circle(44%) view-box 50% auto 45deg/ center;"), v("normal circle(44%) 50% auto 45deg/ center", "offset: normal circle(44%) 50% auto 45deg/ center;"), v("normal ellipse(48% 32%) content-box 50% auto 45deg/ center", "offset: normal ellipse(48% 32%) content-box 50% auto 45deg/ center;"), v("normal ellipse(48% 32%) padding-box 50% auto 45deg/ center", "offset: normal ellipse(48% 32%) padding-box 50% auto 45deg/ center;"), v("normal ellipse(48% 32%) border-box 50% auto 45deg/ center", "offset: normal ellipse(48% 32%) border-box 50% auto 45deg/ center;"), v("normal ellipse(48% 32%) fill-box 50% auto 45deg/ center", "offset: normal ellipse(48% 32%) fill-box 50% auto 45deg/ center;"), v("normal ellipse(48% 32%) stroke-box 50% auto 45deg/ center", "offset: normal ellipse(48% 32%) stroke-box 50% auto 45deg/ center;"), v("normal ellipse(48% 32%) view-box 50% auto 45deg/ center", "offset: normal ellipse(48% 32%) view-box 50% auto 45deg/ center;"), v("normal ellipse(48% 32%) 50% auto 45deg/ center", "offset: normal ellipse(48% 32%) 50% auto 45deg/ center;"), v("normal inset(14% round 14px) content-box 50% auto 45deg/ center", "offset: normal inset(14% round 14px) content-box 50% auto 45deg/ center;"), v("normal inset(14% round 14px) padding-box 50% auto 45deg/ center", "offset: normal inset(14% round 14px) padding-box 50% auto 45deg/ center;"), v("normal inset(14% round 14px) border-box 50% auto 45deg/ center", "offset: normal inset(14% round 14px) border-box 50% auto 45deg/ center;"), v("normal inset(14% round 14px) fill-box 50% auto 45deg/ center", "offset: normal inset(14% round 14px) fill-box 50% auto 45deg/ center;"), v("normal inset(14% round 14px) stroke-box 50% auto 45deg/ center", "offset: normal inset(14% round 14px) stroke-box 50% auto 45deg/ center;"), v("normal inset(14% round 14px) view-box 50% auto 45deg/ center", "offset: normal inset(14% round 14px) view-box 50% auto 45deg/ center;"), v("normal inset(14% round 14px) 50% auto 45deg/ center", "offset: normal inset(14% round 14px) 50% auto 45deg/ center;"), v("normal polygon(50% 4%, 96% 96%, 4% 96%) content-box 50% auto 45deg/ center", "offset: normal polygon(50% 4%, 96% 96%, 4% 96%) content-box 50% auto 45deg/ center;"), v("normal polygon(50% 4%, 96% 96%, 4% 96%) padding-box 50% auto 45deg/ center", "offset: normal polygon(50% 4%, 96% 96%, 4% 96%) padding-box 50% auto 45deg/ center;"), v("normal polygon(50% 4%, 96% 96%, 4% 96%) border-box 50% auto 45deg/ center", "offset: normal polygon(50% 4%, 96% 96%, 4% 96%) border-box 50% auto 45deg/ center;"), v("normal polygon(50% 4%, 96% 96%, 4% 96%) fill-box 50% auto 45deg/ center", "offset: normal polygon(50% 4%, 96% 96%, 4% 96%) fill-box 50% auto 45deg/ center;"), v("normal polygon(50% 4%, 96% 96%, 4% 96%) stroke-box 50% auto 45deg/ center", "offset: normal polygon(50% 4%, 96% 96%, 4% 96%) stroke-box 50% auto 45deg/ center;"), v("normal polygon(50% 4%, 96% 96%, 4% 96%) view-box 50% auto 45deg/ center", "offset: normal polygon(50% 4%, 96% 96%, 4% 96%) view-box 50% auto 45deg/ center;"), v("normal polygon(50% 4%, 96% 96%, 4% 96%) 50% auto 45deg/ center", "offset: normal polygon(50% 4%, 96% 96%, 4% 96%) 50% auto 45deg/ center;"), v("normal content-box ray(45deg closest-corner contain at left) 50% auto 45deg/ center", "offset: normal content-box ray(45deg closest-corner contain at left) 50% auto 45deg/ center;"), v("normal content-box url(assets/photo.jpg) 50% auto 45deg/ center", "offset: normal content-box url(assets/photo.jpg) 50% auto 45deg/ center;"), v("normal content-box circle(44%) 50% auto 45deg/ center", "offset: normal content-box circle(44%) 50% auto 45deg/ center;"), v("normal content-box ellipse(48% 32%) 50% auto 45deg/ center", "offset: normal content-box ellipse(48% 32%) 50% auto 45deg/ center;"), v("normal content-box inset(14% round 14px) 50% auto 45deg/ center", "offset: normal content-box inset(14% round 14px) 50% auto 45deg/ center;"), v("normal content-box polygon(50% 4%, 96% 96%, 4% 96%) 50% auto 45deg/ center", "offset: normal content-box polygon(50% 4%, 96% 96%, 4% 96%) 50% auto 45deg/ center;"), v("normal content-box 50% auto 45deg/ center", "offset: normal content-box 50% auto 45deg/ center;"), ], }, { number: 432, name: "offset-anchor", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eoffset-anchor\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the point inside the box of an element traveling along an \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/offset-path\"\u003e\u003ccode\u003eoffset-path\u003c/code\u003e\u003c/a\u003e that is actually moving along the path.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | PositionType", ebnf: "offset-anchor =\n \"auto\" | PositionType", valueType: "keyword", defaultValue: "left", related: [], provenance: "assisted", truncated: true, trueCount: 140, shown: 50, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("auto", "offset-anchor: auto;"), v("left", "offset-anchor: left;"), v("center", "offset-anchor: center;"), v("right", "offset-anchor: right;"), v("top", "offset-anchor: top;"), v("bottom", "offset-anchor: bottom;"), v("x-start", "offset-anchor: x-start;"), v("x-end", "offset-anchor: x-end;"), v("y-start", "offset-anchor: y-start;"), v("y-end", "offset-anchor: y-end;"), v("block-start", "offset-anchor: block-start;"), v("block-end", "offset-anchor: block-end;"), v("inline-start", "offset-anchor: inline-start;"), v("inline-end", "offset-anchor: inline-end;"), v("24px", "offset-anchor: 24px;"), v("48px", "offset-anchor: 48px;"), v("8px", "offset-anchor: 8px;"), v("16px", "offset-anchor: 16px;"), v("64px", "offset-anchor: 64px;"), v("50%", "offset-anchor: 50%;"), v("80%", "offset-anchor: 80%;"), v("30%", "offset-anchor: 30%;"), v("65%", "offset-anchor: 65%;"), v("15%", "offset-anchor: 15%;"), v("100%", "offset-anchor: 100%;"), v("calc(24px)", "offset-anchor: calc(24px);"), v("clamp(24px, 2em, 48px)", "offset-anchor: clamp(24px, 2em, 48px);"), v("min(24px)", "offset-anchor: min(24px);"), v("max(24px)", "offset-anchor: max(24px);"), v("round(nearest, 24px, 2em)", "offset-anchor: round(nearest, 24px, 2em);"), v("abs(24px)", "offset-anchor: abs(24px);"), v("var(--my-var, 48px)", "offset-anchor: var(--my-var, 48px);"), v("env(my-ident, 48px)", "offset-anchor: env(my-ident, 48px);"), v("left top", "offset-anchor: left top;"), v("left center", "offset-anchor: left center;"), v("left bottom", "offset-anchor: left bottom;"), v("left y-start", "offset-anchor: left y-start;"), v("left y-end", "offset-anchor: left y-end;"), v("center top", "offset-anchor: center top;"), v("center center", "offset-anchor: center center;"), v("center bottom", "offset-anchor: center bottom;"), v("center y-start", "offset-anchor: center y-start;"), v("center y-end", "offset-anchor: center y-end;"), v("right top", "offset-anchor: right top;"), v("right center", "offset-anchor: right center;"), v("right bottom", "offset-anchor: right bottom;"), v("right y-start", "offset-anchor: right y-start;"), v("right y-end", "offset-anchor: right y-end;"), v("x-start top", "offset-anchor: x-start top;"), v("x-start center", "offset-anchor: x-start center;"), ], }, { number: 433, name: "offset-distance", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eoffset-distance\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies a position along an \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/offset-path\"\u003e\u003ccode\u003eoffset-path\u003c/code\u003e\u003c/a\u003e for an element to be placed.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LengthPercentageType", ebnf: "offset-distance =\n LengthPercentageType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 19, shown: 19, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "offset-distance: 24px;"), v("48px", "offset-distance: 48px;"), v("8px", "offset-distance: 8px;"), v("16px", "offset-distance: 16px;"), v("64px", "offset-distance: 64px;"), v("50%", "offset-distance: 50%;"), v("80%", "offset-distance: 80%;"), v("30%", "offset-distance: 30%;"), v("65%", "offset-distance: 65%;"), v("15%", "offset-distance: 15%;"), v("100%", "offset-distance: 100%;"), v("calc(24px)", "offset-distance: calc(24px);"), v("clamp(24px, 2em, 48px)", "offset-distance: clamp(24px, 2em, 48px);"), v("min(24px)", "offset-distance: min(24px);"), v("max(24px)", "offset-distance: max(24px);"), v("round(nearest, 24px, 2em)", "offset-distance: round(nearest, 24px, 2em);"), v("abs(24px)", "offset-distance: abs(24px);"), v("var(--my-var, 48px)", "offset-distance: var(--my-var, 48px);"), v("env(my-ident, 48px)", "offset-distance: env(my-ident, 48px);"), ], }, { number: 434, name: "offset-path", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eoffset-path\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies a path for an element to follow and determines the element's positioning within the path's parent container or the SVG coordinate system. The path is a line, a curve, or a geometrical shape along which the element gets positioned or moves.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\"\n | OffsetPathType , [ CoordBoxType ] | CoordBoxType , [ OffsetPathType ]", ebnf: "offset-path =\n \"none\"\n | OffsetPathType , [ CoordBoxType ] | CoordBoxType , [ OffsetPathType ]", valueType: "function", defaultValue: "ray(45deg closest-corner contain at left) content-box", related: [], provenance: "assisted", truncated: false, trueCount: 85, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "BasicShapeType", samples: ["circle(44%)", "ellipse(48% 32%)", "inset(14% round 14px)", "polygon(50% 4%, 96% 96%, 4% 96%)"] }, { type: "UrlType", samples: ["url(assets/photo.jpg)"] }], values: [ v("none", "offset-path: none;"), v("ray(45deg closest-corner contain at left) content-box", "offset-path: ray(45deg closest-corner contain at left) content-box;"), v("ray(45deg closest-corner contain at left) padding-box", "offset-path: ray(45deg closest-corner contain at left) padding-box;"), v("ray(45deg closest-corner contain at left) border-box", "offset-path: ray(45deg closest-corner contain at left) border-box;"), v("ray(45deg closest-corner contain at left) fill-box", "offset-path: ray(45deg closest-corner contain at left) fill-box;"), v("ray(45deg closest-corner contain at left) stroke-box", "offset-path: ray(45deg closest-corner contain at left) stroke-box;"), v("ray(45deg closest-corner contain at left) view-box", "offset-path: ray(45deg closest-corner contain at left) view-box;"), v("ray(45deg closest-corner contain at left)", "offset-path: ray(45deg closest-corner contain at left);"), v("url(assets/photo.jpg) content-box", "offset-path: url(assets/photo.jpg) content-box;"), v("url(assets/photo.jpg) padding-box", "offset-path: url(assets/photo.jpg) padding-box;"), v("url(assets/photo.jpg) border-box", "offset-path: url(assets/photo.jpg) border-box;"), v("url(assets/photo.jpg) fill-box", "offset-path: url(assets/photo.jpg) fill-box;"), v("url(assets/photo.jpg) stroke-box", "offset-path: url(assets/photo.jpg) stroke-box;"), v("url(assets/photo.jpg) view-box", "offset-path: url(assets/photo.jpg) view-box;"), v("url(assets/photo.jpg)", "offset-path: url(assets/photo.jpg);"), v("circle(44%) content-box", "offset-path: circle(44%) content-box;"), v("circle(44%) padding-box", "offset-path: circle(44%) padding-box;"), v("circle(44%) border-box", "offset-path: circle(44%) border-box;"), v("circle(44%) fill-box", "offset-path: circle(44%) fill-box;"), v("circle(44%) stroke-box", "offset-path: circle(44%) stroke-box;"), v("circle(44%) view-box", "offset-path: circle(44%) view-box;"), v("circle(44%)", "offset-path: circle(44%);"), v("ellipse(48% 32%) content-box", "offset-path: ellipse(48% 32%) content-box;"), v("ellipse(48% 32%) padding-box", "offset-path: ellipse(48% 32%) padding-box;"), v("ellipse(48% 32%) border-box", "offset-path: ellipse(48% 32%) border-box;"), v("ellipse(48% 32%) fill-box", "offset-path: ellipse(48% 32%) fill-box;"), v("ellipse(48% 32%) stroke-box", "offset-path: ellipse(48% 32%) stroke-box;"), v("ellipse(48% 32%) view-box", "offset-path: ellipse(48% 32%) view-box;"), v("ellipse(48% 32%)", "offset-path: ellipse(48% 32%);"), v("inset(14% round 14px) content-box", "offset-path: inset(14% round 14px) content-box;"), v("inset(14% round 14px) padding-box", "offset-path: inset(14% round 14px) padding-box;"), v("inset(14% round 14px) border-box", "offset-path: inset(14% round 14px) border-box;"), v("inset(14% round 14px) fill-box", "offset-path: inset(14% round 14px) fill-box;"), v("inset(14% round 14px) stroke-box", "offset-path: inset(14% round 14px) stroke-box;"), v("inset(14% round 14px) view-box", "offset-path: inset(14% round 14px) view-box;"), v("inset(14% round 14px)", "offset-path: inset(14% round 14px);"), v("polygon(50% 4%, 96% 96%, 4% 96%) content-box", "offset-path: polygon(50% 4%, 96% 96%, 4% 96%) content-box;"), v("polygon(50% 4%, 96% 96%, 4% 96%) padding-box", "offset-path: polygon(50% 4%, 96% 96%, 4% 96%) padding-box;"), v("polygon(50% 4%, 96% 96%, 4% 96%) border-box", "offset-path: polygon(50% 4%, 96% 96%, 4% 96%) border-box;"), v("polygon(50% 4%, 96% 96%, 4% 96%) fill-box", "offset-path: polygon(50% 4%, 96% 96%, 4% 96%) fill-box;"), v("polygon(50% 4%, 96% 96%, 4% 96%) stroke-box", "offset-path: polygon(50% 4%, 96% 96%, 4% 96%) stroke-box;"), v("polygon(50% 4%, 96% 96%, 4% 96%) view-box", "offset-path: polygon(50% 4%, 96% 96%, 4% 96%) view-box;"), v("polygon(50% 4%, 96% 96%, 4% 96%)", "offset-path: polygon(50% 4%, 96% 96%, 4% 96%);"), v("content-box ray(45deg closest-corner contain at left)", "offset-path: content-box ray(45deg closest-corner contain at left);"), v("content-box url(assets/photo.jpg)", "offset-path: content-box url(assets/photo.jpg);"), v("content-box circle(44%)", "offset-path: content-box circle(44%);"), v("content-box ellipse(48% 32%)", "offset-path: content-box ellipse(48% 32%);"), v("content-box inset(14% round 14px)", "offset-path: content-box inset(14% round 14px);"), v("content-box polygon(50% 4%, 96% 96%, 4% 96%)", "offset-path: content-box polygon(50% 4%, 96% 96%, 4% 96%);"), v("content-box", "offset-path: content-box;"), ], }, { number: 435, name: "offset-position", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eoffset-position\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the initial position of an element along a path. This property is typically used in combination with the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/offset-path\"\u003e\u003ccode\u003eoffset-path\u003c/code\u003e\u003c/a\u003e property to create a motion effect. The value of \u003ccode\u003eoffset-position\u003c/code\u003e determines where the element gets placed initially for moving along an offset path if an \u003ccode\u003eoffset-path\u003c/code\u003e function such as \u003ca href=\"/en-US/docs/Web/CSS/Reference/Values/basic-shape/path\"\u003e\u003ccode\u003epath()\u003c/code\u003e\u003c/a\u003e does not specify its own starting position.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | \"auto\" | PositionType", ebnf: "offset-position =\n \"normal\" | \"auto\" | PositionType", valueType: "keyword", defaultValue: "auto", related: [], provenance: "assisted", truncated: true, trueCount: 141, shown: 50, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("normal", "offset-position: normal;"), v("auto", "offset-position: auto;"), v("left", "offset-position: left;"), v("center", "offset-position: center;"), v("right", "offset-position: right;"), v("top", "offset-position: top;"), v("bottom", "offset-position: bottom;"), v("x-start", "offset-position: x-start;"), v("x-end", "offset-position: x-end;"), v("y-start", "offset-position: y-start;"), v("y-end", "offset-position: y-end;"), v("block-start", "offset-position: block-start;"), v("block-end", "offset-position: block-end;"), v("inline-start", "offset-position: inline-start;"), v("inline-end", "offset-position: inline-end;"), v("24px", "offset-position: 24px;"), v("48px", "offset-position: 48px;"), v("8px", "offset-position: 8px;"), v("16px", "offset-position: 16px;"), v("64px", "offset-position: 64px;"), v("50%", "offset-position: 50%;"), v("80%", "offset-position: 80%;"), v("30%", "offset-position: 30%;"), v("65%", "offset-position: 65%;"), v("15%", "offset-position: 15%;"), v("100%", "offset-position: 100%;"), v("calc(24px)", "offset-position: calc(24px);"), v("clamp(24px, 2em, 48px)", "offset-position: clamp(24px, 2em, 48px);"), v("min(24px)", "offset-position: min(24px);"), v("max(24px)", "offset-position: max(24px);"), v("round(nearest, 24px, 2em)", "offset-position: round(nearest, 24px, 2em);"), v("abs(24px)", "offset-position: abs(24px);"), v("var(--my-var, 48px)", "offset-position: var(--my-var, 48px);"), v("env(my-ident, 48px)", "offset-position: env(my-ident, 48px);"), v("left top", "offset-position: left top;"), v("left center", "offset-position: left center;"), v("left bottom", "offset-position: left bottom;"), v("left y-start", "offset-position: left y-start;"), v("left y-end", "offset-position: left y-end;"), v("center top", "offset-position: center top;"), v("center center", "offset-position: center center;"), v("center bottom", "offset-position: center bottom;"), v("center y-start", "offset-position: center y-start;"), v("center y-end", "offset-position: center y-end;"), v("right top", "offset-position: right top;"), v("right center", "offset-position: right center;"), v("right bottom", "offset-position: right bottom;"), v("right y-start", "offset-position: right y-start;"), v("right y-end", "offset-position: right y-end;"), v("x-start top", "offset-position: x-start top;"), ], }, { number: 436, name: "offset-rotate", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eoffset-rotate\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the orientation/direction of the element as it is positioned along the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/offset-path\"\u003e\u003ccode\u003eoffset-path\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "( \"auto\" | \"reverse\" ) , [ angle_type ] | angle_type , [ ( \"auto\" | \"reverse\" ) ]", ebnf: "offset-rotate =\n ( \"auto\" | \"reverse\" ) , [ angle_type ] | angle_type , [ ( \"auto\" | \"reverse\" ) ]", valueType: "angle", defaultValue: "auto 135deg", related: [], provenance: "assisted", truncated: false, trueCount: 27, shown: 27, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }], values: [ v("auto 45deg", "offset-rotate: auto 45deg;"), v("auto 135deg", "offset-rotate: auto 135deg;"), v("auto 250deg", "offset-rotate: auto 250deg;"), v("auto 320deg", "offset-rotate: auto 320deg;"), v("auto 90deg", "offset-rotate: auto 90deg;"), v("auto", "offset-rotate: auto;"), v("reverse 45deg", "offset-rotate: reverse 45deg;"), v("reverse 135deg", "offset-rotate: reverse 135deg;"), v("reverse 250deg", "offset-rotate: reverse 250deg;"), v("reverse 320deg", "offset-rotate: reverse 320deg;"), v("reverse 90deg", "offset-rotate: reverse 90deg;"), v("reverse", "offset-rotate: reverse;"), v("45deg auto", "offset-rotate: 45deg auto;"), v("45deg reverse", "offset-rotate: 45deg reverse;"), v("45deg", "offset-rotate: 45deg;"), v("135deg auto", "offset-rotate: 135deg auto;"), v("135deg reverse", "offset-rotate: 135deg reverse;"), v("135deg", "offset-rotate: 135deg;"), v("250deg auto", "offset-rotate: 250deg auto;"), v("250deg reverse", "offset-rotate: 250deg reverse;"), v("250deg", "offset-rotate: 250deg;"), v("320deg auto", "offset-rotate: 320deg auto;"), v("320deg reverse", "offset-rotate: 320deg reverse;"), v("320deg", "offset-rotate: 320deg;"), v("90deg auto", "offset-rotate: 90deg auto;"), v("90deg reverse", "offset-rotate: 90deg reverse;"), v("90deg", "offset-rotate: 90deg;"), ], }, ], }, { id: "shapes", sigil: "30", title: "Shapes (Float Shaping)", blurb: "Shape the area that inline content wraps around a float.", demo: "generic", sampleKind: "box", group: "families", focus: false, gallery: false, count: 4, properties: [ { number: 437, name: "shape-image-threshold", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eshape-image-threshold\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the alpha channel threshold used to extract the shape using an image as the value for \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/shape-outside\"\u003e\u003ccode\u003eshape-outside\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "OpacityValueType", ebnf: "shape-image-threshold =\n OpacityValueType", valueType: "keyword", defaultValue: "2", related: [], provenance: "assisted", truncated: false, trueCount: 11, shown: 11, assists: [{ type: "\u003cnumber [0,∞]\u003e", samples: ["1", "2", "0.5", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("1", "shape-image-threshold: 1;"), v("2", "shape-image-threshold: 2;"), v("0.5", "shape-image-threshold: 0.5;"), v("0.75", "shape-image-threshold: 0.75;"), v("0.25", "shape-image-threshold: 0.25;"), v("50%", "shape-image-threshold: 50%;"), v("80%", "shape-image-threshold: 80%;"), v("30%", "shape-image-threshold: 30%;"), v("65%", "shape-image-threshold: 65%;"), v("15%", "shape-image-threshold: 15%;"), v("100%", "shape-image-threshold: 100%;"), ], }, { number: 438, name: "shape-margin", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eshape-margin\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets a margin for a CSS shape created using \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/shape-outside\"\u003e\u003ccode\u003eshape-outside\u003c/code\u003e\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "NonNegativeLengthPercentageType", ebnf: "shape-margin =\n NonNegativeLengthPercentageType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 18, shown: 18, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage [0,∞]\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "shape-margin: 24px;"), v("48px", "shape-margin: 48px;"), v("8px", "shape-margin: 8px;"), v("16px", "shape-margin: 16px;"), v("64px", "shape-margin: 64px;"), v("50%", "shape-margin: 50%;"), v("80%", "shape-margin: 80%;"), v("30%", "shape-margin: 30%;"), v("65%", "shape-margin: 65%;"), v("15%", "shape-margin: 15%;"), v("100%", "shape-margin: 100%;"), v("calc(24px)", "shape-margin: calc(24px);"), v("clamp(24px, 2em, 48px)", "shape-margin: clamp(24px, 2em, 48px);"), v("min(24px)", "shape-margin: min(24px);"), v("max(24px)", "shape-margin: max(24px);"), v("round(nearest, 24px, 2em)", "shape-margin: round(nearest, 24px, 2em);"), v("abs(24px)", "shape-margin: abs(24px);"), v("env(my-ident, 48px)", "shape-margin: env(my-ident, 48px);"), ], }, { number: 439, name: "shape-outside", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eshape-outside\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; \u003ccode\u003eshape-outside\u003c/code\u003e provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than rectangular boxes.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\"\n | BasicShapeType , [ ShapeBoxType ] | ShapeBoxType , [ BasicShapeType ]\n | ImageType", ebnf: "shape-outside =\n \"none\"\n | BasicShapeType , [ ShapeBoxType ] | ShapeBoxType , [ BasicShapeType ]\n | ImageType", valueType: "function", defaultValue: "circle(44%) content-box", related: [], provenance: "assisted", truncated: false, trueCount: 53, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cresolution\u003e", samples: ["96dpi", "2x", "300dpi"] }, { type: "\u003cstring\u003e", samples: ["\"Specimen\"", "\"Aa\""] }, { type: "BasicShapeType", samples: ["circle(44%)", "ellipse(48% 32%)", "inset(14% round 14px)", "polygon(50% 4%, 96% 96%, 4% 96%)"] }, { type: "ConicGradientFn", samples: ["conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c)"] }, { type: "LinearGradientFn", samples: ["linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)"] }, { type: "RadialGradientFn", samples: ["radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)"] }, { type: "RepeatingConicGradientFn", samples: ["repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg)"] }, { type: "RepeatingLinearGradientFn", samples: ["repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)"] }, { type: "RepeatingRadialGradientFn", samples: ["repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px)"] }, { type: "UrlType", samples: ["url(assets/photo.jpg)"] }], values: [ v("none", "shape-outside: none;"), v("circle(44%) content-box", "shape-outside: circle(44%) content-box;"), v("circle(44%) padding-box", "shape-outside: circle(44%) padding-box;"), v("circle(44%) border-box", "shape-outside: circle(44%) border-box;"), v("circle(44%) margin-box", "shape-outside: circle(44%) margin-box;"), v("circle(44%)", "shape-outside: circle(44%);"), v("ellipse(48% 32%) content-box", "shape-outside: ellipse(48% 32%) content-box;"), v("ellipse(48% 32%) padding-box", "shape-outside: ellipse(48% 32%) padding-box;"), v("ellipse(48% 32%) border-box", "shape-outside: ellipse(48% 32%) border-box;"), v("ellipse(48% 32%) margin-box", "shape-outside: ellipse(48% 32%) margin-box;"), v("ellipse(48% 32%)", "shape-outside: ellipse(48% 32%);"), v("inset(14% round 14px) content-box", "shape-outside: inset(14% round 14px) content-box;"), v("inset(14% round 14px) padding-box", "shape-outside: inset(14% round 14px) padding-box;"), v("inset(14% round 14px) border-box", "shape-outside: inset(14% round 14px) border-box;"), v("inset(14% round 14px) margin-box", "shape-outside: inset(14% round 14px) margin-box;"), v("inset(14% round 14px)", "shape-outside: inset(14% round 14px);"), v("polygon(50% 4%, 96% 96%, 4% 96%) content-box", "shape-outside: polygon(50% 4%, 96% 96%, 4% 96%) content-box;"), v("polygon(50% 4%, 96% 96%, 4% 96%) padding-box", "shape-outside: polygon(50% 4%, 96% 96%, 4% 96%) padding-box;"), v("polygon(50% 4%, 96% 96%, 4% 96%) border-box", "shape-outside: polygon(50% 4%, 96% 96%, 4% 96%) border-box;"), v("polygon(50% 4%, 96% 96%, 4% 96%) margin-box", "shape-outside: polygon(50% 4%, 96% 96%, 4% 96%) margin-box;"), v("polygon(50% 4%, 96% 96%, 4% 96%)", "shape-outside: polygon(50% 4%, 96% 96%, 4% 96%);"), v("content-box circle(44%)", "shape-outside: content-box circle(44%);"), v("content-box ellipse(48% 32%)", "shape-outside: content-box ellipse(48% 32%);"), v("content-box inset(14% round 14px)", "shape-outside: content-box inset(14% round 14px);"), v("content-box polygon(50% 4%, 96% 96%, 4% 96%)", "shape-outside: content-box polygon(50% 4%, 96% 96%, 4% 96%);"), v("content-box", "shape-outside: content-box;"), v("padding-box circle(44%)", "shape-outside: padding-box circle(44%);"), v("padding-box ellipse(48% 32%)", "shape-outside: padding-box ellipse(48% 32%);"), v("padding-box inset(14% round 14px)", "shape-outside: padding-box inset(14% round 14px);"), v("padding-box polygon(50% 4%, 96% 96%, 4% 96%)", "shape-outside: padding-box polygon(50% 4%, 96% 96%, 4% 96%);"), v("padding-box", "shape-outside: padding-box;"), v("border-box circle(44%)", "shape-outside: border-box circle(44%);"), v("border-box ellipse(48% 32%)", "shape-outside: border-box ellipse(48% 32%);"), v("border-box inset(14% round 14px)", "shape-outside: border-box inset(14% round 14px);"), v("border-box polygon(50% 4%, 96% 96%, 4% 96%)", "shape-outside: border-box polygon(50% 4%, 96% 96%, 4% 96%);"), v("border-box", "shape-outside: border-box;"), v("margin-box circle(44%)", "shape-outside: margin-box circle(44%);"), v("margin-box ellipse(48% 32%)", "shape-outside: margin-box ellipse(48% 32%);"), v("margin-box inset(14% round 14px)", "shape-outside: margin-box inset(14% round 14px);"), v("margin-box polygon(50% 4%, 96% 96%, 4% 96%)", "shape-outside: margin-box polygon(50% 4%, 96% 96%, 4% 96%);"), v("margin-box", "shape-outside: margin-box;"), v("url(assets/photo.jpg)", "shape-outside: url(assets/photo.jpg);"), v("image(ltr url(assets/photo.jpg))", "shape-outside: image(ltr url(assets/photo.jpg));"), v("image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\"))", "shape-outside: image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\"));"), v("cross-fade(url(assets/photo.jpg) 30%)", "shape-outside: cross-fade(url(assets/photo.jpg) 30%);"), v("element(#alpha)", "shape-outside: element(#alpha);"), v("linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)", "shape-outside: linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0);"), v("repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)", "shape-outside: repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px);"), v("radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)", "shape-outside: radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0);"), v("repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px)", "shape-outside: repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px);"), ], }, { number: 440, name: "shape-rendering", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eshape-rendering\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property provides hints to the renderer about what tradeoffs to make when rendering shapes like paths, circles, or rectangles. It only has an effect on the \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/circle\"\u003e\u003ccode\u003e\u0026lt;circle\u0026gt;\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/ellipse\"\u003e\u003ccode\u003e\u0026lt;ellipse\u0026gt;\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/line\"\u003e\u003ccode\u003e\u0026lt;line\u0026gt;\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/path\"\u003e\u003ccode\u003e\u0026lt;path\u0026gt;\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/polygon\"\u003e\u003ccode\u003e\u0026lt;polygon\u0026gt;\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/polyline\"\u003e\u003ccode\u003e\u0026lt;polyline\u0026gt;\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/rect\"\u003e\u003ccode\u003e\u0026lt;rect\u0026gt;\u003c/code\u003e\u003c/a\u003e elements. If explicitly declared, the value of the CSS property overrides the any values of the element's \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/shape-rendering\"\u003e\u003ccode\u003eshape-rendering\u003c/code\u003e\u003c/a\u003e attribute.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"optimizeSpeed\" | \"crispEdges\" | \"geometricPrecision\"", ebnf: "shape-rendering =\n \"auto\" | \"optimizeSpeed\" | \"crispEdges\" | \"geometricPrecision\"", valueType: "keyword", defaultValue: "optimizeSpeed", related: [], provenance: "pure", truncated: false, trueCount: 4, shown: 4, assists: [], values: [ v("auto", "shape-rendering: auto;"), v("optimizeSpeed", "shape-rendering: optimizeSpeed;"), v("crispEdges", "shape-rendering: crispEdges;"), v("geometricPrecision", "shape-rendering: geometricPrecision;"), ], }, ], }, { id: "view-transitions", sigil: "31", title: "View Transitions", blurb: "Name elements so the engine can animate between states.", demo: "generic", sampleKind: "box", group: "families", focus: false, gallery: false, count: 2, properties: [ { number: 441, name: "view-transition-class", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eview-transition-class\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property provides the selected elements with one or more identifying classes (\u003ca href=\"/en-US/docs/Web/CSS/Reference/Values/custom-ident\"\u003e\u003ccode\u003e\u0026lt;custom-ident\u0026gt;\u003c/code\u003e\u003c/a\u003es), providing an additional method of styling the view transitions for those elements.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | custom_ident_type , { custom_ident_type }", ebnf: "view-transition-class =\n \"none\" | custom_ident_type , { custom_ident_type }", valueType: "keyword", defaultValue: "my-ident", related: [], provenance: "assisted", truncated: false, trueCount: 3, shown: 3, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }], values: [ v("none", "view-transition-class: none;"), v("my-ident", "view-transition-class: my-ident;"), v("tag-a", "view-transition-class: tag-a;"), ], }, { number: 442, name: "view-transition-name", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eview-transition-name\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the \u003ca href=\"/en-US/docs/Web/API/View_Transition_API\"\u003eview transition\u003c/a\u003e snapshot that selected elements will participate in. This enables you to animate those elements separately from the rest of the page, which uses the default cross-fade animation during a view transition. You can then define custom animation styles for these elements.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | \"match-element\" | custom_ident_type", ebnf: "view-transition-name =\n \"none\" | \"match-element\" | custom_ident_type", valueType: "keyword", defaultValue: "match-element", related: [], provenance: "assisted", truncated: false, trueCount: 4, shown: 4, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }], values: [ v("none", "view-transition-name: none;"), v("match-element", "view-transition-name: match-element;"), v("my-ident", "view-transition-name: my-ident;"), v("tag-a", "view-transition-name: tag-a;"), ], }, ], }, { id: "svg", sigil: "32", title: "SVG Paint \u0026 Geometry", blurb: "Paint and geometry properties that apply to SVG figures.", demo: "generic", sampleKind: "box", group: "families", focus: false, gallery: false, count: 31, properties: [ { number: 443, name: "alignment-baseline", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ealignment-baseline\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the specific \u003ca href=\"/en-US/docs/Glossary/Baseline/Typography\"\u003ebaseline\u003c/a\u003e used to align the box's text and inline-level contents. \u003cstrong\u003eBaseline alignment\u003c/strong\u003e is the relationship among the baselines of multiple alignment subjects within an alignment context. When performing baseline alignment, the \u003ccode\u003ealignment-baseline\u003c/code\u003e property value specifies which baseline of the box is aligned to the corresponding baseline of its alignment context.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"baseline\" | BaselineMetricType", ebnf: "alignment-baseline =\n \"baseline\" | BaselineMetricType", valueType: "keyword", defaultValue: "text-bottom", related: [], provenance: "pure", truncated: false, trueCount: 9, shown: 9, assists: [], values: [ v("baseline", "alignment-baseline: baseline;"), v("text-bottom", "alignment-baseline: text-bottom;"), v("alphabetic", "alignment-baseline: alphabetic;"), v("ideographic", "alignment-baseline: ideographic;"), v("middle", "alignment-baseline: middle;"), v("central", "alignment-baseline: central;"), v("mathematical", "alignment-baseline: mathematical;"), v("hanging", "alignment-baseline: hanging;"), v("text-top", "alignment-baseline: text-top;"), ], }, { number: 444, name: "baseline-shift", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebaseline-shift\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property repositions the dominant-baseline of a text element relative to the dominant-baseline of its parent text content element. The shifted element might be a sub- or superscript. If the property is present, the value overrides the element's \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/baseline-shift\"\u003e\u003ccode\u003ebaseline-shift\u003c/code\u003e\u003c/a\u003e attribute.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LengthPercentageType | \"sub\" | \"super\" | \"top\" | \"center\" | \"bottom\"", ebnf: "baseline-shift =\n LengthPercentageType | \"sub\" | \"super\" | \"top\" | \"center\" | \"bottom\"", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 24, shown: 24, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "baseline-shift: 24px;"), v("48px", "baseline-shift: 48px;"), v("8px", "baseline-shift: 8px;"), v("16px", "baseline-shift: 16px;"), v("64px", "baseline-shift: 64px;"), v("50%", "baseline-shift: 50%;"), v("80%", "baseline-shift: 80%;"), v("30%", "baseline-shift: 30%;"), v("65%", "baseline-shift: 65%;"), v("15%", "baseline-shift: 15%;"), v("100%", "baseline-shift: 100%;"), v("calc(24px)", "baseline-shift: calc(24px);"), v("clamp(24px, 2em, 48px)", "baseline-shift: clamp(24px, 2em, 48px);"), v("min(24px)", "baseline-shift: min(24px);"), v("max(24px)", "baseline-shift: max(24px);"), v("round(nearest, 24px, 2em)", "baseline-shift: round(nearest, 24px, 2em);"), v("abs(24px)", "baseline-shift: abs(24px);"), v("var(--my-var, 48px)", "baseline-shift: var(--my-var, 48px);"), v("env(my-ident, 48px)", "baseline-shift: env(my-ident, 48px);"), v("sub", "baseline-shift: sub;"), v("super", "baseline-shift: super;"), v("top", "baseline-shift: top;"), v("center", "baseline-shift: center;"), v("bottom", "baseline-shift: bottom;"), ], }, { number: 445, name: "color-interpolation", maturity: "modern", description: "The \u003ccode\u003ecolor-interpolation\u003c/code\u003e CSS property is used in SVG to specify which color space to use for \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/linearGradient\"\u003e\u003ccode\u003e\u0026lt;linearGradient\u0026gt;\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/radialGradient\"\u003e\u003ccode\u003e\u0026lt;radialGradient\u0026gt;\u003c/code\u003e\u003c/a\u003e SVG elements.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"srgb\" | \"linearRGB\"", ebnf: "color-interpolation =\n \"auto\" | \"srgb\" | \"linearRGB\"", valueType: "keyword", defaultValue: "srgb", related: [], provenance: "pure", truncated: false, trueCount: 3, shown: 3, assists: [], values: [ v("auto", "color-interpolation: auto;"), v("srgb", "color-interpolation: srgb;"), v("linearRGB", "color-interpolation: linearRGB;"), ], }, { number: 446, name: "color-interpolation-filters", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecolor-interpolation-filters\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the color space for imaging operations performed via SVG filter effects. If explicitly declared, the value of the CSS property overrides any value given in the element's \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters\"\u003e\u003ccode\u003ecolor-interpolation-filters\u003c/code\u003e\u003c/a\u003e attribute.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"srgb\" | \"linearRGB\"", ebnf: "color-interpolation-filters =\n \"auto\" | \"srgb\" | \"linearRGB\"", valueType: "keyword", defaultValue: "srgb", related: [], provenance: "pure", truncated: false, trueCount: 3, shown: 3, assists: [], values: [ v("auto", "color-interpolation-filters: auto;"), v("srgb", "color-interpolation-filters: srgb;"), v("linearRGB", "color-interpolation-filters: linearRGB;"), ], }, { number: 447, name: "cx", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecx\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the x-axis center point of an SVG \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/circle\"\u003e\u003ccode\u003e\u0026lt;circle\u0026gt;\u003c/code\u003e\u003c/a\u003e or \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/ellipse\"\u003e\u003ccode\u003e\u0026lt;ellipse\u0026gt;\u003c/code\u003e\u003c/a\u003e element. If present, it overrides the element's \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/cx\"\u003e\u003ccode\u003ecx\u003c/code\u003e\u003c/a\u003e attribute.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LengthPercentageType", ebnf: "cx =\n LengthPercentageType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 19, shown: 19, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "cx: 24px;"), v("48px", "cx: 48px;"), v("8px", "cx: 8px;"), v("16px", "cx: 16px;"), v("64px", "cx: 64px;"), v("50%", "cx: 50%;"), v("80%", "cx: 80%;"), v("30%", "cx: 30%;"), v("65%", "cx: 65%;"), v("15%", "cx: 15%;"), v("100%", "cx: 100%;"), v("calc(24px)", "cx: calc(24px);"), v("clamp(24px, 2em, 48px)", "cx: clamp(24px, 2em, 48px);"), v("min(24px)", "cx: min(24px);"), v("max(24px)", "cx: max(24px);"), v("round(nearest, 24px, 2em)", "cx: round(nearest, 24px, 2em);"), v("abs(24px)", "cx: abs(24px);"), v("var(--my-var, 48px)", "cx: var(--my-var, 48px);"), v("env(my-ident, 48px)", "cx: env(my-ident, 48px);"), ], }, { number: 448, name: "cy", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ecy\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the y-axis center point of an SVG \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/circle\"\u003e\u003ccode\u003e\u0026lt;circle\u0026gt;\u003c/code\u003e\u003c/a\u003e or \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/ellipse\"\u003e\u003ccode\u003e\u0026lt;ellipse\u0026gt;\u003c/code\u003e\u003c/a\u003e elements. If present, it overrides the element's \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/cy\"\u003e\u003ccode\u003ecy\u003c/code\u003e\u003c/a\u003e attribute.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LengthPercentageType", ebnf: "cy =\n LengthPercentageType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 19, shown: 19, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "cy: 24px;"), v("48px", "cy: 48px;"), v("8px", "cy: 8px;"), v("16px", "cy: 16px;"), v("64px", "cy: 64px;"), v("50%", "cy: 50%;"), v("80%", "cy: 80%;"), v("30%", "cy: 30%;"), v("65%", "cy: 65%;"), v("15%", "cy: 15%;"), v("100%", "cy: 100%;"), v("calc(24px)", "cy: calc(24px);"), v("clamp(24px, 2em, 48px)", "cy: clamp(24px, 2em, 48px);"), v("min(24px)", "cy: min(24px);"), v("max(24px)", "cy: max(24px);"), v("round(nearest, 24px, 2em)", "cy: round(nearest, 24px, 2em);"), v("abs(24px)", "cy: abs(24px);"), v("var(--my-var, 48px)", "cy: var(--my-var, 48px);"), v("env(my-ident, 48px)", "cy: env(my-ident, 48px);"), ], }, { number: 449, name: "dominant-baseline", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003edominant-baseline\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the specific \u003ca href=\"/en-US/docs/Glossary/Baseline/Typography\"\u003ebaseline\u003c/a\u003e used to align the box's text and inline-level contents. It also indicates the default alignment baseline of any boxes participating in baseline alignment in the box's alignment context. If present, it overrides the shape's \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/dominant-baseline\"\u003e\u003ccode\u003edominant-baseline\u003c/code\u003e\u003c/a\u003e attribute.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | BaselineMetricType", ebnf: "dominant-baseline =\n \"auto\" | BaselineMetricType", valueType: "keyword", defaultValue: "text-bottom", related: [], provenance: "pure", truncated: false, trueCount: 9, shown: 9, assists: [], values: [ v("auto", "dominant-baseline: auto;"), v("text-bottom", "dominant-baseline: text-bottom;"), v("alphabetic", "dominant-baseline: alphabetic;"), v("ideographic", "dominant-baseline: ideographic;"), v("middle", "dominant-baseline: middle;"), v("central", "dominant-baseline: central;"), v("mathematical", "dominant-baseline: mathematical;"), v("hanging", "dominant-baseline: hanging;"), v("text-top", "dominant-baseline: text-top;"), ], }, { number: 450, name: "fill", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efill\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines how SVG text content and the interior canvas of SVG shapes are filled or painted. If present, it overrides the element's \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/fill\"\u003e\u003ccode\u003efill\u003c/code\u003e\u003c/a\u003e attribute.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "PaintType", ebnf: "fill =\n PaintType", valueType: "keyword", defaultValue: "#c5483c", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003cinteger\u003e", samples: ["2", "1", "3", "5", "4"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("none", "fill: none;"), v("#c5483c", "fill: #c5483c;"), v("#2f5fd0", "fill: #2f5fd0;"), v("rgb(50%, 80%, 30%, 0.75)", "fill: rgb(50%, 80%, 30%, 0.75);"), v("rgb(1, 0.5, 2, 0.75)", "fill: rgb(1, 0.5, 2, 0.75);"), v("rgb(from #c5483c 80% 65% 100%/ 2)", "fill: rgb(from #c5483c 80% 65% 100%/ 2);"), v("rgba(50%, 80%, 30%, 0.75)", "fill: rgba(50%, 80%, 30%, 0.75);"), v("rgba(1, 0.5, 2, 0.75)", "fill: rgba(1, 0.5, 2, 0.75);"), v("rgba(from #c5483c 80% 65% 100%/ 2)", "fill: rgba(from #c5483c 80% 65% 100%/ 2);"), v("hsl(45deg, 30%, 65%, 0.25)", "fill: hsl(45deg, 30%, 65%, 0.25);"), v("hsl(from #c5483c 135deg 65% 100%/ 2)", "fill: hsl(from #c5483c 135deg 65% 100%/ 2);"), v("hsla(45deg, 30%, 65%, 0.25)", "fill: hsla(45deg, 30%, 65%, 0.25);"), v("hsla(from #c5483c 135deg 65% 100%/ 2)", "fill: hsla(from #c5483c 135deg 65% 100%/ 2);"), v("hwb(from #c5483c 135deg 65% 100%/ 2)", "fill: hwb(from #c5483c 135deg 65% 100%/ 2);"), v("lab(from #c5483c 80% 15% 80%/ 1)", "fill: lab(from #c5483c 80% 15% 80%/ 1);"), v("lch(from #c5483c 80% 15% 250deg/ 1)", "fill: lch(from #c5483c 80% 15% 250deg/ 1);"), v("oklab(from #c5483c 80% 15% 80%/ 1)", "fill: oklab(from #c5483c 80% 15% 80%/ 1);"), v("oklch(from #c5483c 80% 15% 250deg/ 1)", "fill: oklch(from #c5483c 80% 15% 250deg/ 1);"), v("ictcp(from #c5483c 80% 15% 80%/ 1)", "fill: ictcp(from #c5483c 80% 15% 80%/ 1);"), v("jzazbz(from #c5483c 80% 15% 80%/ 1)", "fill: jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("jzczhz(from #c5483c 80% 15% 250deg/ 1)", "fill: jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("alpha(from #c5483c/ 0.5)", "fill: alpha(from #c5483c/ 0.5);"), v("color(from #c5483c --my-var 2/ 0.5)", "fill: color(from #c5483c --my-var 2/ 0.5);"), v("color-hdr(#c5483c 0.5, #c5483c 0.75)", "fill: color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("aliceblue", "fill: aliceblue;"), v("antiquewhite", "fill: antiquewhite;"), v("aqua", "fill: aqua;"), v("aquamarine", "fill: aquamarine;"), v("azure", "fill: azure;"), v("beige", "fill: beige;"), v("bisque", "fill: bisque;"), v("black", "fill: black;"), v("blanchedalmond", "fill: blanchedalmond;"), v("blue", "fill: blue;"), v("blueviolet", "fill: blueviolet;"), v("brown", "fill: brown;"), v("burlywood", "fill: burlywood;"), v("cadetblue", "fill: cadetblue;"), v("chartreuse", "fill: chartreuse;"), v("chocolate", "fill: chocolate;"), v("coral", "fill: coral;"), v("cornflowerblue", "fill: cornflowerblue;"), v("cornsilk", "fill: cornsilk;"), v("crimson", "fill: crimson;"), v("cyan", "fill: cyan;"), v("darkblue", "fill: darkblue;"), v("darkcyan", "fill: darkcyan;"), v("darkgoldenrod", "fill: darkgoldenrod;"), v("darkgray", "fill: darkgray;"), v("darkgreen", "fill: darkgreen;"), ], }, { number: 451, name: "fill-opacity", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efill-opacity\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the opacity of the painting operation (color, gradient, pattern, etc.) applied to SVG shapes or text content elements to fill the element. The property defines the opacity of the element's \u003ccode\u003efill\u003c/code\u003e only; it does not affect the stroke. If present, it overrides the element's \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/fill-opacity\"\u003e\u003ccode\u003efill-opacity\u003c/code\u003e\u003c/a\u003e attribute.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "OpacityProp", ebnf: "fill-opacity =\n OpacityProp", valueType: "keyword", defaultValue: "2", related: [], provenance: "assisted", truncated: false, trueCount: 11, shown: 11, assists: [{ type: "\u003cnumber [0,∞]\u003e", samples: ["1", "2", "0.5", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("1", "fill-opacity: 1;"), v("2", "fill-opacity: 2;"), v("0.5", "fill-opacity: 0.5;"), v("0.75", "fill-opacity: 0.75;"), v("0.25", "fill-opacity: 0.25;"), v("50%", "fill-opacity: 50%;"), v("80%", "fill-opacity: 80%;"), v("30%", "fill-opacity: 30%;"), v("65%", "fill-opacity: 65%;"), v("15%", "fill-opacity: 15%;"), v("100%", "fill-opacity: 100%;"), ], }, { number: 452, name: "fill-rule", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003efill-rule\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the rule used to determine which parts of the SVG shape's canvas are included inside a shape to be filled. If present, it overrides the element's \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/fill-rule\"\u003e\u003ccode\u003efill-rule\u003c/code\u003e\u003c/a\u003e attribute.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"nonzero\" | \"evenodd\"", ebnf: "fill-rule =\n \"nonzero\" | \"evenodd\"", valueType: "keyword", defaultValue: "evenodd", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("nonzero", "fill-rule: nonzero;"), v("evenodd", "fill-rule: evenodd;"), ], }, { number: 453, name: "flood-color", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eflood-color\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the color of the current filter primitive subregion in \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/feFlood\"\u003e\u003ccode\u003e\u0026lt;feFlood\u0026gt;\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/feDropShadow\"\u003e\u003ccode\u003e\u0026lt;feDropShadow\u0026gt;\u003c/code\u003e\u003c/a\u003e elements within a \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/filter\"\u003e\u003ccode\u003e\u0026lt;filter\u0026gt;\u003c/code\u003e\u003c/a\u003e. If present, it overrides the element's \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/flood-color\"\u003e\u003ccode\u003eflood-color\u003c/code\u003e\u003c/a\u003e attribute.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ColorType", ebnf: "flood-color =\n ColorType", valueType: "keyword", defaultValue: "#2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("#c5483c", "flood-color: #c5483c;"), v("#2f5fd0", "flood-color: #2f5fd0;"), v("rgb(50%, 80%, 30%, 0.75)", "flood-color: rgb(50%, 80%, 30%, 0.75);"), v("rgb(1, 0.5, 2, 0.75)", "flood-color: rgb(1, 0.5, 2, 0.75);"), v("rgb(from #c5483c 80% 65% 100%/ 2)", "flood-color: rgb(from #c5483c 80% 65% 100%/ 2);"), v("rgba(50%, 80%, 30%, 0.75)", "flood-color: rgba(50%, 80%, 30%, 0.75);"), v("rgba(1, 0.5, 2, 0.75)", "flood-color: rgba(1, 0.5, 2, 0.75);"), v("rgba(from #c5483c 80% 65% 100%/ 2)", "flood-color: rgba(from #c5483c 80% 65% 100%/ 2);"), v("hsl(45deg, 30%, 65%, 0.25)", "flood-color: hsl(45deg, 30%, 65%, 0.25);"), v("hsl(from #c5483c 135deg 65% 100%/ 2)", "flood-color: hsl(from #c5483c 135deg 65% 100%/ 2);"), v("hsla(45deg, 30%, 65%, 0.25)", "flood-color: hsla(45deg, 30%, 65%, 0.25);"), v("hsla(from #c5483c 135deg 65% 100%/ 2)", "flood-color: hsla(from #c5483c 135deg 65% 100%/ 2);"), v("hwb(from #c5483c 135deg 65% 100%/ 2)", "flood-color: hwb(from #c5483c 135deg 65% 100%/ 2);"), v("lab(from #c5483c 80% 15% 80%/ 1)", "flood-color: lab(from #c5483c 80% 15% 80%/ 1);"), v("lch(from #c5483c 80% 15% 250deg/ 1)", "flood-color: lch(from #c5483c 80% 15% 250deg/ 1);"), v("oklab(from #c5483c 80% 15% 80%/ 1)", "flood-color: oklab(from #c5483c 80% 15% 80%/ 1);"), v("oklch(from #c5483c 80% 15% 250deg/ 1)", "flood-color: oklch(from #c5483c 80% 15% 250deg/ 1);"), v("ictcp(from #c5483c 80% 15% 80%/ 1)", "flood-color: ictcp(from #c5483c 80% 15% 80%/ 1);"), v("jzazbz(from #c5483c 80% 15% 80%/ 1)", "flood-color: jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("jzczhz(from #c5483c 80% 15% 250deg/ 1)", "flood-color: jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("alpha(from #c5483c/ 0.5)", "flood-color: alpha(from #c5483c/ 0.5);"), v("color(from #c5483c --my-var 2/ 0.5)", "flood-color: color(from #c5483c --my-var 2/ 0.5);"), v("color-hdr(#c5483c 0.5, #c5483c 0.75)", "flood-color: color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("aliceblue", "flood-color: aliceblue;"), v("antiquewhite", "flood-color: antiquewhite;"), v("aqua", "flood-color: aqua;"), v("aquamarine", "flood-color: aquamarine;"), v("azure", "flood-color: azure;"), v("beige", "flood-color: beige;"), v("bisque", "flood-color: bisque;"), v("black", "flood-color: black;"), v("blanchedalmond", "flood-color: blanchedalmond;"), v("blue", "flood-color: blue;"), v("blueviolet", "flood-color: blueviolet;"), v("brown", "flood-color: brown;"), v("burlywood", "flood-color: burlywood;"), v("cadetblue", "flood-color: cadetblue;"), v("chartreuse", "flood-color: chartreuse;"), v("chocolate", "flood-color: chocolate;"), v("coral", "flood-color: coral;"), v("cornflowerblue", "flood-color: cornflowerblue;"), v("cornsilk", "flood-color: cornsilk;"), v("crimson", "flood-color: crimson;"), v("cyan", "flood-color: cyan;"), v("darkblue", "flood-color: darkblue;"), v("darkcyan", "flood-color: darkcyan;"), v("darkgoldenrod", "flood-color: darkgoldenrod;"), v("darkgray", "flood-color: darkgray;"), v("darkgreen", "flood-color: darkgreen;"), v("darkgrey", "flood-color: darkgrey;"), ], }, { number: 454, name: "flood-opacity", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eflood-opacity\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the opacity of the current filter primitive subregion in \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/feFlood\"\u003e\u003ccode\u003e\u0026lt;feFlood\u0026gt;\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/feDropShadow\"\u003e\u003ccode\u003e\u0026lt;feDropShadow\u0026gt;\u003c/code\u003e\u003c/a\u003e elements within a \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/filter\"\u003e\u003ccode\u003e\u0026lt;filter\u0026gt;\u003c/code\u003e\u003c/a\u003e. If present, it overrides the element's \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/flood-opacity\"\u003e\u003ccode\u003eflood-opacity\u003c/code\u003e\u003c/a\u003e attribute.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "OpacityProp", ebnf: "flood-opacity =\n OpacityProp", valueType: "keyword", defaultValue: "2", related: [], provenance: "assisted", truncated: false, trueCount: 11, shown: 11, assists: [{ type: "\u003cnumber [0,∞]\u003e", samples: ["1", "2", "0.5", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("1", "flood-opacity: 1;"), v("2", "flood-opacity: 2;"), v("0.5", "flood-opacity: 0.5;"), v("0.75", "flood-opacity: 0.75;"), v("0.25", "flood-opacity: 0.25;"), v("50%", "flood-opacity: 50%;"), v("80%", "flood-opacity: 80%;"), v("30%", "flood-opacity: 30%;"), v("65%", "flood-opacity: 65%;"), v("15%", "flood-opacity: 15%;"), v("100%", "flood-opacity: 100%;"), ], }, { number: 455, name: "lighting-color", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003elighting-color\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the color of the light source for the \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/feDiffuseLighting\"\u003e\u003ccode\u003e\u0026lt;feDiffuseLighting\u0026gt;\u003c/code\u003e\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/feSpecularLighting\"\u003e\u003ccode\u003e\u0026lt;feSpecularLighting\u0026gt;\u003c/code\u003e\u003c/a\u003e SVG lighting filter primitives within an SVG \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/filter\"\u003e\u003ccode\u003e\u0026lt;filter\u0026gt;\u003c/code\u003e\u003c/a\u003e. If present, it overrides the element's \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/lighting-color\"\u003e\u003ccode\u003elighting-color\u003c/code\u003e\u003c/a\u003e attribute.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ColorType", ebnf: "lighting-color =\n ColorType", valueType: "keyword", defaultValue: "#2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("#c5483c", "lighting-color: #c5483c;"), v("#2f5fd0", "lighting-color: #2f5fd0;"), v("rgb(50%, 80%, 30%, 0.75)", "lighting-color: rgb(50%, 80%, 30%, 0.75);"), v("rgb(1, 0.5, 2, 0.75)", "lighting-color: rgb(1, 0.5, 2, 0.75);"), v("rgb(from #c5483c 80% 65% 100%/ 2)", "lighting-color: rgb(from #c5483c 80% 65% 100%/ 2);"), v("rgba(50%, 80%, 30%, 0.75)", "lighting-color: rgba(50%, 80%, 30%, 0.75);"), v("rgba(1, 0.5, 2, 0.75)", "lighting-color: rgba(1, 0.5, 2, 0.75);"), v("rgba(from #c5483c 80% 65% 100%/ 2)", "lighting-color: rgba(from #c5483c 80% 65% 100%/ 2);"), v("hsl(45deg, 30%, 65%, 0.25)", "lighting-color: hsl(45deg, 30%, 65%, 0.25);"), v("hsl(from #c5483c 135deg 65% 100%/ 2)", "lighting-color: hsl(from #c5483c 135deg 65% 100%/ 2);"), v("hsla(45deg, 30%, 65%, 0.25)", "lighting-color: hsla(45deg, 30%, 65%, 0.25);"), v("hsla(from #c5483c 135deg 65% 100%/ 2)", "lighting-color: hsla(from #c5483c 135deg 65% 100%/ 2);"), v("hwb(from #c5483c 135deg 65% 100%/ 2)", "lighting-color: hwb(from #c5483c 135deg 65% 100%/ 2);"), v("lab(from #c5483c 80% 15% 80%/ 1)", "lighting-color: lab(from #c5483c 80% 15% 80%/ 1);"), v("lch(from #c5483c 80% 15% 250deg/ 1)", "lighting-color: lch(from #c5483c 80% 15% 250deg/ 1);"), v("oklab(from #c5483c 80% 15% 80%/ 1)", "lighting-color: oklab(from #c5483c 80% 15% 80%/ 1);"), v("oklch(from #c5483c 80% 15% 250deg/ 1)", "lighting-color: oklch(from #c5483c 80% 15% 250deg/ 1);"), v("ictcp(from #c5483c 80% 15% 80%/ 1)", "lighting-color: ictcp(from #c5483c 80% 15% 80%/ 1);"), v("jzazbz(from #c5483c 80% 15% 80%/ 1)", "lighting-color: jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("jzczhz(from #c5483c 80% 15% 250deg/ 1)", "lighting-color: jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("alpha(from #c5483c/ 0.5)", "lighting-color: alpha(from #c5483c/ 0.5);"), v("color(from #c5483c --my-var 2/ 0.5)", "lighting-color: color(from #c5483c --my-var 2/ 0.5);"), v("color-hdr(#c5483c 0.5, #c5483c 0.75)", "lighting-color: color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("aliceblue", "lighting-color: aliceblue;"), v("antiquewhite", "lighting-color: antiquewhite;"), v("aqua", "lighting-color: aqua;"), v("aquamarine", "lighting-color: aquamarine;"), v("azure", "lighting-color: azure;"), v("beige", "lighting-color: beige;"), v("bisque", "lighting-color: bisque;"), v("black", "lighting-color: black;"), v("blanchedalmond", "lighting-color: blanchedalmond;"), v("blue", "lighting-color: blue;"), v("blueviolet", "lighting-color: blueviolet;"), v("brown", "lighting-color: brown;"), v("burlywood", "lighting-color: burlywood;"), v("cadetblue", "lighting-color: cadetblue;"), v("chartreuse", "lighting-color: chartreuse;"), v("chocolate", "lighting-color: chocolate;"), v("coral", "lighting-color: coral;"), v("cornflowerblue", "lighting-color: cornflowerblue;"), v("cornsilk", "lighting-color: cornsilk;"), v("crimson", "lighting-color: crimson;"), v("cyan", "lighting-color: cyan;"), v("darkblue", "lighting-color: darkblue;"), v("darkcyan", "lighting-color: darkcyan;"), v("darkgoldenrod", "lighting-color: darkgoldenrod;"), v("darkgray", "lighting-color: darkgray;"), v("darkgreen", "lighting-color: darkgreen;"), v("darkgrey", "lighting-color: darkgrey;"), ], }, { number: 456, name: "marker", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emarker\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property points to a marker that will be drawn on the first, middle, and last vertices of the element's path; that is, at all of its vertices. The marker must have been defined using an SVG \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/marker\"\u003e\u003ccode\u003e\u0026lt;marker\u0026gt;\u003c/code\u003e\u003c/a\u003e element, and can only be referenced with a \u003ca href=\"/en-US/docs/Web/CSS/Reference/Values/url_value\"\u003e\u003ccode\u003e\u0026lt;url\u0026gt;\u003c/code\u003e\u003c/a\u003e value. The value of the CSS property overrides any values of the \u003ccode\u003emarker-start\u003c/code\u003e, \u003ccode\u003emarker\u003c/code\u003e, and \u003ccode\u003emarker-end\u003c/code\u003e attributes in the SVG.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | MarkerRefType", ebnf: "marker =\n \"none\" | MarkerRefType", valueType: "function", defaultValue: "url(assets/photo.jpg)", related: [], provenance: "assisted", truncated: false, trueCount: 2, shown: 2, assists: [{ type: "UrlType", samples: ["url(assets/photo.jpg)"] }], values: [ v("none", "marker: none;"), v("url(assets/photo.jpg)", "marker: url(assets/photo.jpg);"), ], }, { number: 457, name: "marker-end", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emarker-end\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property points to a marker that will be drawn on the last vertex of the element's path; that is, at its ending vertex. The marker must have been defined using an SVG \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/marker\"\u003e\u003ccode\u003e\u0026lt;marker\u0026gt;\u003c/code\u003e\u003c/a\u003e element, and can only be referenced with a \u003ca href=\"/en-US/docs/Web/CSS/Reference/Values/url_value\"\u003e\u003ccode\u003e\u0026lt;url\u0026gt;\u003c/code\u003e\u003c/a\u003e value. The value of the CSS property overrides any values of the \u003ccode\u003emarker-end\u003c/code\u003e attribute in the SVG.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | MarkerRefType", ebnf: "marker-end =\n \"none\" | MarkerRefType", valueType: "function", defaultValue: "url(assets/photo.jpg)", related: [], provenance: "assisted", truncated: false, trueCount: 2, shown: 2, assists: [{ type: "UrlType", samples: ["url(assets/photo.jpg)"] }], values: [ v("none", "marker-end: none;"), v("url(assets/photo.jpg)", "marker-end: url(assets/photo.jpg);"), ], }, { number: 458, name: "marker-mid", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emarker-mid\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property points to a marker that will be drawn on the middle vertices of the element's path; that is, at each of its vertices between the start and end vertices. The marker must have been defined using an SVG \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/marker\"\u003e\u003ccode\u003e\u0026lt;marker\u0026gt;\u003c/code\u003e\u003c/a\u003e element, and can only be referenced with a \u003ca href=\"/en-US/docs/Web/CSS/Reference/Values/url_value\"\u003e\u003ccode\u003e\u0026lt;url\u0026gt;\u003c/code\u003e\u003c/a\u003e value. The value of the CSS property overrides any values of the \u003ccode\u003emarker-mid\u003c/code\u003e attribute in the SVG.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | MarkerRefType", ebnf: "marker-mid =\n \"none\" | MarkerRefType", valueType: "function", defaultValue: "url(assets/photo.jpg)", related: [], provenance: "assisted", truncated: false, trueCount: 2, shown: 2, assists: [{ type: "UrlType", samples: ["url(assets/photo.jpg)"] }], values: [ v("none", "marker-mid: none;"), v("url(assets/photo.jpg)", "marker-mid: url(assets/photo.jpg);"), ], }, { number: 459, name: "marker-start", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emarker-start\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property points to a marker that will be drawn on the first vertex of the element's path; that is, at its starting vertex. The marker must have been defined using an SVG \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/marker\"\u003e\u003ccode\u003e\u0026lt;marker\u0026gt;\u003c/code\u003e\u003c/a\u003e element, and can only be referenced with a \u003ca href=\"/en-US/docs/Web/CSS/Reference/Values/url_value\"\u003e\u003ccode\u003e\u0026lt;url\u0026gt;\u003c/code\u003e\u003c/a\u003e value. The value of the CSS property overrides any values of the \u003ccode\u003emarker-start\u003c/code\u003e attribute in the SVG.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | MarkerRefType", ebnf: "marker-start =\n \"none\" | MarkerRefType", valueType: "function", defaultValue: "url(assets/photo.jpg)", related: [], provenance: "assisted", truncated: false, trueCount: 2, shown: 2, assists: [{ type: "UrlType", samples: ["url(assets/photo.jpg)"] }], values: [ v("none", "marker-start: none;"), v("url(assets/photo.jpg)", "marker-start: url(assets/photo.jpg);"), ], }, { number: 460, name: "paint-order", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003epaint-order\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property lets you control the order in which the fill and stroke (and painting markers) of text content and shapes are drawn.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\"\n | \"fill\" , [ \"stroke\" , [ \"markers\" ] | \"markers\" , [ \"stroke\" ] ]\n | \"stroke\" , [ \"fill\" , [ \"markers\" ] | \"markers\" , [ \"fill\" ] ]\n | \"markers\" , [ \"fill\" , [ \"stroke\" ] | \"stroke\" , [ \"fill\" ] ]", ebnf: "paint-order =\n \"normal\"\n | \"fill\" , [ \"stroke\" , [ \"markers\" ] | \"markers\" , [ \"stroke\" ] ]\n | \"stroke\" , [ \"fill\" , [ \"markers\" ] | \"markers\" , [ \"fill\" ] ]\n | \"markers\" , [ \"fill\" , [ \"stroke\" ] | \"stroke\" , [ \"fill\" ] ]", valueType: "keyword", defaultValue: "fill stroke markers", related: [], provenance: "pure", truncated: false, trueCount: 16, shown: 16, assists: [], values: [ v("normal", "paint-order: normal;"), v("fill stroke markers", "paint-order: fill stroke markers;"), v("fill stroke", "paint-order: fill stroke;"), v("fill markers stroke", "paint-order: fill markers stroke;"), v("fill markers", "paint-order: fill markers;"), v("fill", "paint-order: fill;"), v("stroke fill markers", "paint-order: stroke fill markers;"), v("stroke fill", "paint-order: stroke fill;"), v("stroke markers fill", "paint-order: stroke markers fill;"), v("stroke markers", "paint-order: stroke markers;"), v("stroke", "paint-order: stroke;"), v("markers fill stroke", "paint-order: markers fill stroke;"), v("markers fill", "paint-order: markers fill;"), v("markers stroke fill", "paint-order: markers stroke fill;"), v("markers stroke", "paint-order: markers stroke;"), v("markers", "paint-order: markers;"), ], }, { number: 461, name: "rx", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003erx\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the x-axis, or horizontal, radius of an SVG \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/ellipse\"\u003e\u003ccode\u003e\u0026lt;ellipse\u0026gt;\u003c/code\u003e\u003c/a\u003e and the horizontal curve of the corners of an SVG \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/rect\"\u003e\u003ccode\u003e\u0026lt;rect\u0026gt;\u003c/code\u003e\u003c/a\u003e rectangle. If present, it overrides the shape's \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/rx\"\u003e\u003ccode\u003erx\u003c/code\u003e\u003c/a\u003e attribute.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LengthPercentageType | \"auto\"", ebnf: "rx =\n LengthPercentageType | \"auto\"", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 20, shown: 20, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "rx: 24px;"), v("48px", "rx: 48px;"), v("8px", "rx: 8px;"), v("16px", "rx: 16px;"), v("64px", "rx: 64px;"), v("50%", "rx: 50%;"), v("80%", "rx: 80%;"), v("30%", "rx: 30%;"), v("65%", "rx: 65%;"), v("15%", "rx: 15%;"), v("100%", "rx: 100%;"), v("calc(24px)", "rx: calc(24px);"), v("clamp(24px, 2em, 48px)", "rx: clamp(24px, 2em, 48px);"), v("min(24px)", "rx: min(24px);"), v("max(24px)", "rx: max(24px);"), v("round(nearest, 24px, 2em)", "rx: round(nearest, 24px, 2em);"), v("abs(24px)", "rx: abs(24px);"), v("var(--my-var, 48px)", "rx: var(--my-var, 48px);"), v("env(my-ident, 48px)", "rx: env(my-ident, 48px);"), v("auto", "rx: auto;"), ], }, { number: 462, name: "ry", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ery\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the y-axis, or vertical, radius of an SVG \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/ellipse\"\u003e\u003ccode\u003e\u0026lt;ellipse\u0026gt;\u003c/code\u003e\u003c/a\u003e and the vertical curve of the corners of an SVG \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/rect\"\u003e\u003ccode\u003e\u0026lt;rect\u0026gt;\u003c/code\u003e\u003c/a\u003e rectangle. If present, it overrides the shape's \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/ry\"\u003e\u003ccode\u003ery\u003c/code\u003e\u003c/a\u003e attribute.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LengthPercentageType | \"auto\"", ebnf: "ry =\n LengthPercentageType | \"auto\"", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 20, shown: 20, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "ry: 24px;"), v("48px", "ry: 48px;"), v("8px", "ry: 8px;"), v("16px", "ry: 16px;"), v("64px", "ry: 64px;"), v("50%", "ry: 50%;"), v("80%", "ry: 80%;"), v("30%", "ry: 30%;"), v("65%", "ry: 65%;"), v("15%", "ry: 15%;"), v("100%", "ry: 100%;"), v("calc(24px)", "ry: calc(24px);"), v("clamp(24px, 2em, 48px)", "ry: clamp(24px, 2em, 48px);"), v("min(24px)", "ry: min(24px);"), v("max(24px)", "ry: max(24px);"), v("round(nearest, 24px, 2em)", "ry: round(nearest, 24px, 2em);"), v("abs(24px)", "ry: abs(24px);"), v("var(--my-var, 48px)", "ry: var(--my-var, 48px);"), v("env(my-ident, 48px)", "ry: env(my-ident, 48px);"), v("auto", "ry: auto;"), ], }, { number: 463, name: "stop-color", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003estop-color\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the color to use for an SVG \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/stop\"\u003e\u003ccode\u003e\u0026lt;stop\u0026gt;\u003c/code\u003e\u003c/a\u003e element within a gradient. If present, it overrides the element's \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/stop-color\"\u003e\u003ccode\u003estop-color\u003c/code\u003e\u003c/a\u003e attribute.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "ColorType", ebnf: "stop-color =\n ColorType", valueType: "keyword", defaultValue: "#2f5fd0", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("#c5483c", "stop-color: #c5483c;"), v("#2f5fd0", "stop-color: #2f5fd0;"), v("rgb(50%, 80%, 30%, 0.75)", "stop-color: rgb(50%, 80%, 30%, 0.75);"), v("rgb(1, 0.5, 2, 0.75)", "stop-color: rgb(1, 0.5, 2, 0.75);"), v("rgb(from #c5483c 80% 65% 100%/ 2)", "stop-color: rgb(from #c5483c 80% 65% 100%/ 2);"), v("rgba(50%, 80%, 30%, 0.75)", "stop-color: rgba(50%, 80%, 30%, 0.75);"), v("rgba(1, 0.5, 2, 0.75)", "stop-color: rgba(1, 0.5, 2, 0.75);"), v("rgba(from #c5483c 80% 65% 100%/ 2)", "stop-color: rgba(from #c5483c 80% 65% 100%/ 2);"), v("hsl(45deg, 30%, 65%, 0.25)", "stop-color: hsl(45deg, 30%, 65%, 0.25);"), v("hsl(from #c5483c 135deg 65% 100%/ 2)", "stop-color: hsl(from #c5483c 135deg 65% 100%/ 2);"), v("hsla(45deg, 30%, 65%, 0.25)", "stop-color: hsla(45deg, 30%, 65%, 0.25);"), v("hsla(from #c5483c 135deg 65% 100%/ 2)", "stop-color: hsla(from #c5483c 135deg 65% 100%/ 2);"), v("hwb(from #c5483c 135deg 65% 100%/ 2)", "stop-color: hwb(from #c5483c 135deg 65% 100%/ 2);"), v("lab(from #c5483c 80% 15% 80%/ 1)", "stop-color: lab(from #c5483c 80% 15% 80%/ 1);"), v("lch(from #c5483c 80% 15% 250deg/ 1)", "stop-color: lch(from #c5483c 80% 15% 250deg/ 1);"), v("oklab(from #c5483c 80% 15% 80%/ 1)", "stop-color: oklab(from #c5483c 80% 15% 80%/ 1);"), v("oklch(from #c5483c 80% 15% 250deg/ 1)", "stop-color: oklch(from #c5483c 80% 15% 250deg/ 1);"), v("ictcp(from #c5483c 80% 15% 80%/ 1)", "stop-color: ictcp(from #c5483c 80% 15% 80%/ 1);"), v("jzazbz(from #c5483c 80% 15% 80%/ 1)", "stop-color: jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("jzczhz(from #c5483c 80% 15% 250deg/ 1)", "stop-color: jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("alpha(from #c5483c/ 0.5)", "stop-color: alpha(from #c5483c/ 0.5);"), v("color(from #c5483c --my-var 2/ 0.5)", "stop-color: color(from #c5483c --my-var 2/ 0.5);"), v("color-hdr(#c5483c 0.5, #c5483c 0.75)", "stop-color: color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("aliceblue", "stop-color: aliceblue;"), v("antiquewhite", "stop-color: antiquewhite;"), v("aqua", "stop-color: aqua;"), v("aquamarine", "stop-color: aquamarine;"), v("azure", "stop-color: azure;"), v("beige", "stop-color: beige;"), v("bisque", "stop-color: bisque;"), v("black", "stop-color: black;"), v("blanchedalmond", "stop-color: blanchedalmond;"), v("blue", "stop-color: blue;"), v("blueviolet", "stop-color: blueviolet;"), v("brown", "stop-color: brown;"), v("burlywood", "stop-color: burlywood;"), v("cadetblue", "stop-color: cadetblue;"), v("chartreuse", "stop-color: chartreuse;"), v("chocolate", "stop-color: chocolate;"), v("coral", "stop-color: coral;"), v("cornflowerblue", "stop-color: cornflowerblue;"), v("cornsilk", "stop-color: cornsilk;"), v("crimson", "stop-color: crimson;"), v("cyan", "stop-color: cyan;"), v("darkblue", "stop-color: darkblue;"), v("darkcyan", "stop-color: darkcyan;"), v("darkgoldenrod", "stop-color: darkgoldenrod;"), v("darkgray", "stop-color: darkgray;"), v("darkgreen", "stop-color: darkgreen;"), v("darkgrey", "stop-color: darkgrey;"), ], }, { number: 464, name: "stop-opacity", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003estop-opacity\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the opacity of a given color gradient stop in the SVG \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/stop\"\u003e\u003ccode\u003e\u0026lt;stop\u0026gt;\u003c/code\u003e\u003c/a\u003e element within an SVG gradient. If present, it overrides the element's \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/stop-opacity\"\u003e\u003ccode\u003estop-opacity\u003c/code\u003e\u003c/a\u003e attribute.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "NumberType | PercentageType", ebnf: "stop-opacity =\n NumberType | PercentageType", valueType: "keyword", defaultValue: "0.5", related: [], provenance: "assisted", truncated: false, trueCount: 11, shown: 11, assists: [{ type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("1", "stop-opacity: 1;"), v("0.5", "stop-opacity: 0.5;"), v("2", "stop-opacity: 2;"), v("0.75", "stop-opacity: 0.75;"), v("0.25", "stop-opacity: 0.25;"), v("50%", "stop-opacity: 50%;"), v("80%", "stop-opacity: 80%;"), v("30%", "stop-opacity: 30%;"), v("65%", "stop-opacity: 65%;"), v("15%", "stop-opacity: 15%;"), v("100%", "stop-opacity: 100%;"), ], }, { number: 465, name: "stroke", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003estroke\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the color or SVG paint server used to draw an element's stroke. As such, \u003ccode\u003estroke\u003c/code\u003e only has an effect on elements that can be given a stroke (for example, \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/rect\"\u003e\u003ccode\u003e\u0026lt;rect\u0026gt;\u003c/code\u003e\u003c/a\u003e or \u003ca href=\"/en-US/docs/Web/SVG/Reference/Element/ellipse\"\u003e\u003ccode\u003e\u0026lt;ellipse\u0026gt;\u003c/code\u003e\u003c/a\u003e); see the page on the SVG \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/stroke\"\u003e\u003ccode\u003estroke\u003c/code\u003e\u003c/a\u003e attribute for a complete list. When declared, the CSS value overrides any value of the element's \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/stroke\"\u003e\u003ccode\u003estroke\u003c/code\u003e\u003c/a\u003e SVG attribute.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "PaintType", ebnf: "stroke =\n PaintType", valueType: "keyword", defaultValue: "#c5483c", related: [], provenance: "assisted", truncated: true, trueCount: 160, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003cinteger\u003e", samples: ["2", "1", "3", "5", "4"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("none", "stroke: none;"), v("#c5483c", "stroke: #c5483c;"), v("#2f5fd0", "stroke: #2f5fd0;"), v("rgb(50%, 80%, 30%, 0.75)", "stroke: rgb(50%, 80%, 30%, 0.75);"), v("rgb(1, 0.5, 2, 0.75)", "stroke: rgb(1, 0.5, 2, 0.75);"), v("rgb(from #c5483c 80% 65% 100%/ 2)", "stroke: rgb(from #c5483c 80% 65% 100%/ 2);"), v("rgba(50%, 80%, 30%, 0.75)", "stroke: rgba(50%, 80%, 30%, 0.75);"), v("rgba(1, 0.5, 2, 0.75)", "stroke: rgba(1, 0.5, 2, 0.75);"), v("rgba(from #c5483c 80% 65% 100%/ 2)", "stroke: rgba(from #c5483c 80% 65% 100%/ 2);"), v("hsl(45deg, 30%, 65%, 0.25)", "stroke: hsl(45deg, 30%, 65%, 0.25);"), v("hsl(from #c5483c 135deg 65% 100%/ 2)", "stroke: hsl(from #c5483c 135deg 65% 100%/ 2);"), v("hsla(45deg, 30%, 65%, 0.25)", "stroke: hsla(45deg, 30%, 65%, 0.25);"), v("hsla(from #c5483c 135deg 65% 100%/ 2)", "stroke: hsla(from #c5483c 135deg 65% 100%/ 2);"), v("hwb(from #c5483c 135deg 65% 100%/ 2)", "stroke: hwb(from #c5483c 135deg 65% 100%/ 2);"), v("lab(from #c5483c 80% 15% 80%/ 1)", "stroke: lab(from #c5483c 80% 15% 80%/ 1);"), v("lch(from #c5483c 80% 15% 250deg/ 1)", "stroke: lch(from #c5483c 80% 15% 250deg/ 1);"), v("oklab(from #c5483c 80% 15% 80%/ 1)", "stroke: oklab(from #c5483c 80% 15% 80%/ 1);"), v("oklch(from #c5483c 80% 15% 250deg/ 1)", "stroke: oklch(from #c5483c 80% 15% 250deg/ 1);"), v("ictcp(from #c5483c 80% 15% 80%/ 1)", "stroke: ictcp(from #c5483c 80% 15% 80%/ 1);"), v("jzazbz(from #c5483c 80% 15% 80%/ 1)", "stroke: jzazbz(from #c5483c 80% 15% 80%/ 1);"), v("jzczhz(from #c5483c 80% 15% 250deg/ 1)", "stroke: jzczhz(from #c5483c 80% 15% 250deg/ 1);"), v("alpha(from #c5483c/ 0.5)", "stroke: alpha(from #c5483c/ 0.5);"), v("color(from #c5483c --my-var 2/ 0.5)", "stroke: color(from #c5483c --my-var 2/ 0.5);"), v("color-hdr(#c5483c 0.5, #c5483c 0.75)", "stroke: color-hdr(#c5483c 0.5, #c5483c 0.75);"), v("aliceblue", "stroke: aliceblue;"), v("antiquewhite", "stroke: antiquewhite;"), v("aqua", "stroke: aqua;"), v("aquamarine", "stroke: aquamarine;"), v("azure", "stroke: azure;"), v("beige", "stroke: beige;"), v("bisque", "stroke: bisque;"), v("black", "stroke: black;"), v("blanchedalmond", "stroke: blanchedalmond;"), v("blue", "stroke: blue;"), v("blueviolet", "stroke: blueviolet;"), v("brown", "stroke: brown;"), v("burlywood", "stroke: burlywood;"), v("cadetblue", "stroke: cadetblue;"), v("chartreuse", "stroke: chartreuse;"), v("chocolate", "stroke: chocolate;"), v("coral", "stroke: coral;"), v("cornflowerblue", "stroke: cornflowerblue;"), v("cornsilk", "stroke: cornsilk;"), v("crimson", "stroke: crimson;"), v("cyan", "stroke: cyan;"), v("darkblue", "stroke: darkblue;"), v("darkcyan", "stroke: darkcyan;"), v("darkgoldenrod", "stroke: darkgoldenrod;"), v("darkgray", "stroke: darkgray;"), v("darkgreen", "stroke: darkgreen;"), ], }, { number: 466, name: "stroke-dasharray", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003estroke-dasharray\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines a pattern of dashes and gaps used in the painting of the \u003ca href=\"/en-US/docs/Web/SVG\"\u003eSVG\u003c/a\u003e shape's stroke. If present, it overrides the element's \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/stroke-dasharray\"\u003e\u003ccode\u003estroke-dasharray\u003c/code\u003e\u003c/a\u003e attribute.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "StrokeDasharrayPropItem , { StrokeDasharrayPropItem } | \"none\"", ebnf: "stroke-dasharray =\n StrokeDasharrayPropItem , { StrokeDasharrayPropItem } | \"none\"", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 25, shown: 25, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "stroke-dasharray: 24px;"), v("48px", "stroke-dasharray: 48px;"), v("8px", "stroke-dasharray: 8px;"), v("16px", "stroke-dasharray: 16px;"), v("64px", "stroke-dasharray: 64px;"), v("50%", "stroke-dasharray: 50%;"), v("80%", "stroke-dasharray: 80%;"), v("30%", "stroke-dasharray: 30%;"), v("65%", "stroke-dasharray: 65%;"), v("15%", "stroke-dasharray: 15%;"), v("100%", "stroke-dasharray: 100%;"), v("calc(24px)", "stroke-dasharray: calc(24px);"), v("clamp(24px, 2em, 48px)", "stroke-dasharray: clamp(24px, 2em, 48px);"), v("min(24px)", "stroke-dasharray: min(24px);"), v("max(24px)", "stroke-dasharray: max(24px);"), v("round(nearest, 24px, 2em)", "stroke-dasharray: round(nearest, 24px, 2em);"), v("abs(24px)", "stroke-dasharray: abs(24px);"), v("var(--my-var, 48px)", "stroke-dasharray: var(--my-var, 48px);"), v("env(my-ident, 48px)", "stroke-dasharray: env(my-ident, 48px);"), v("1", "stroke-dasharray: 1;"), v("0.5", "stroke-dasharray: 0.5;"), v("2", "stroke-dasharray: 2;"), v("0.75", "stroke-dasharray: 0.75;"), v("0.25", "stroke-dasharray: 0.25;"), v("none", "stroke-dasharray: none;"), ], }, { number: 467, name: "stroke-dashoffset", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003estroke-dashoffset\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines an offset for the starting point of the rendering of an \u003ca href=\"/en-US/docs/Web/SVG\"\u003eSVG\u003c/a\u003e element's associated \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/stroke-dasharray\"\u003edash array\u003c/a\u003e. If present, it overrides the element's \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/stroke-dashoffset\"\u003e\u003ccode\u003estroke-dashoffset\u003c/code\u003e\u003c/a\u003e attribute.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "LengthPercentageType | NumberType", ebnf: "stroke-dashoffset =\n LengthPercentageType | NumberType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 24, shown: 24, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "stroke-dashoffset: 24px;"), v("48px", "stroke-dashoffset: 48px;"), v("8px", "stroke-dashoffset: 8px;"), v("16px", "stroke-dashoffset: 16px;"), v("64px", "stroke-dashoffset: 64px;"), v("50%", "stroke-dashoffset: 50%;"), v("80%", "stroke-dashoffset: 80%;"), v("30%", "stroke-dashoffset: 30%;"), v("65%", "stroke-dashoffset: 65%;"), v("15%", "stroke-dashoffset: 15%;"), v("100%", "stroke-dashoffset: 100%;"), v("calc(24px)", "stroke-dashoffset: calc(24px);"), v("clamp(24px, 2em, 48px)", "stroke-dashoffset: clamp(24px, 2em, 48px);"), v("min(24px)", "stroke-dashoffset: min(24px);"), v("max(24px)", "stroke-dashoffset: max(24px);"), v("round(nearest, 24px, 2em)", "stroke-dashoffset: round(nearest, 24px, 2em);"), v("abs(24px)", "stroke-dashoffset: abs(24px);"), v("var(--my-var, 48px)", "stroke-dashoffset: var(--my-var, 48px);"), v("env(my-ident, 48px)", "stroke-dashoffset: env(my-ident, 48px);"), v("1", "stroke-dashoffset: 1;"), v("0.5", "stroke-dashoffset: 0.5;"), v("2", "stroke-dashoffset: 2;"), v("0.75", "stroke-dashoffset: 0.75;"), v("0.25", "stroke-dashoffset: 0.25;"), ], }, { number: 468, name: "stroke-linecap", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003estroke-linecap\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the shape to be used at the end of open subpaths of \u003ca href=\"/en-US/docs/Web/SVG\"\u003eSVG\u003c/a\u003e elements' unclosed strokes. If present, it overrides the element's \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/stroke-linecap\"\u003e\u003ccode\u003estroke-linecap\u003c/code\u003e\u003c/a\u003e attribute.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"butt\" | \"round\" | \"square\"", ebnf: "stroke-linecap =\n \"butt\" | \"round\" | \"square\"", valueType: "keyword", defaultValue: "round", related: [], provenance: "pure", truncated: false, trueCount: 3, shown: 3, assists: [], values: [ v("butt", "stroke-linecap: butt;"), v("round", "stroke-linecap: round;"), v("square", "stroke-linecap: square;"), ], }, { number: 469, name: "stroke-linejoin", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003estroke-linejoin\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the shape to be used at the corners of an \u003ca href=\"/en-US/docs/Web/SVG\"\u003eSVG\u003c/a\u003e element's stroked paths. If present, it overrides the element's \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/stroke-linejoin\"\u003e\u003ccode\u003estroke-linejoin\u003c/code\u003e\u003c/a\u003e attribute.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"miter\" | \"round\" | \"bevel\" | \"arcs\" | miter_clip", ebnf: "stroke-linejoin =\n \"miter\" | \"round\" | \"bevel\" | \"arcs\" | miter_clip", valueType: "keyword", defaultValue: "round", related: [], provenance: "pure", truncated: false, trueCount: 4, shown: 4, assists: [], values: [ v("miter", "stroke-linejoin: miter;"), v("round", "stroke-linejoin: round;"), v("bevel", "stroke-linejoin: bevel;"), v("arcs", "stroke-linejoin: arcs;"), ], }, { number: 470, name: "stroke-miterlimit", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003estroke-miterlimit\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines a limit on the ratio of the miter length to the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/stroke-width\"\u003e\u003ccode\u003estroke-width\u003c/code\u003e\u003c/a\u003e when the shape to be used at the corners of an \u003ca href=\"/en-US/docs/Web/SVG\"\u003eSVG\u003c/a\u003e element's stroked path is a mitered join. If the limit defined by this property is exceeded, the join is converted from \u003ccode\u003emiter\u003c/code\u003e to \u003ccode\u003ebevel\u003c/code\u003e, thus making the corner appear truncated.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "MiterlimitType", ebnf: "stroke-miterlimit =\n MiterlimitType", valueType: "number", defaultValue: "1", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "MiterlimitType", samples: ["4", "1", "10", "2", "1.5"] }], values: [ v("4", "stroke-miterlimit: 4;"), v("1", "stroke-miterlimit: 1;"), v("10", "stroke-miterlimit: 10;"), v("2", "stroke-miterlimit: 2;"), v("1.5", "stroke-miterlimit: 1.5;"), ], }, { number: 471, name: "stroke-opacity", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003estroke-opacity\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the opacity of an \u003ca href=\"/en-US/docs/Web/SVG\"\u003eSVG\u003c/a\u003e shape's stroke. The effect is identical to that of \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/opacity\"\u003e\u003ccode\u003eopacity\u003c/code\u003e\u003c/a\u003e, except it is applied only to the stroke, not to the entire element. If present, it overrides the element's \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/stroke-opacity\"\u003e\u003ccode\u003estroke-opacity\u003c/code\u003e\u003c/a\u003e attribute.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "OpacityProp", ebnf: "stroke-opacity =\n OpacityProp", valueType: "keyword", defaultValue: "2", related: [], provenance: "assisted", truncated: false, trueCount: 11, shown: 11, assists: [{ type: "\u003cnumber [0,∞]\u003e", samples: ["1", "2", "0.5", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("1", "stroke-opacity: 1;"), v("2", "stroke-opacity: 2;"), v("0.5", "stroke-opacity: 0.5;"), v("0.75", "stroke-opacity: 0.75;"), v("0.25", "stroke-opacity: 0.25;"), v("50%", "stroke-opacity: 50%;"), v("80%", "stroke-opacity: 80%;"), v("30%", "stroke-opacity: 30%;"), v("65%", "stroke-opacity: 65%;"), v("15%", "stroke-opacity: 15%;"), v("100%", "stroke-opacity: 100%;"), ], }, { number: 472, name: "stroke-width", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003estroke-width\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the width of a stroke applied to the \u003ca href=\"/en-US/docs/Web/SVG\"\u003eSVG\u003c/a\u003e shape. If present, it overrides the element's \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/stroke-width\"\u003e\u003ccode\u003estroke-width\u003c/code\u003e\u003c/a\u003e attribute.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "StrokeWidthPropItem , { \",\" , StrokeWidthPropItem }", ebnf: "stroke-width =\n StrokeWidthPropItem , { \",\" , StrokeWidthPropItem }", valueType: "keyword", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 27, shown: 27, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength [0,∞]\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("24px", "stroke-width: 24px;"), v("48px", "stroke-width: 48px;"), v("8px", "stroke-width: 8px;"), v("16px", "stroke-width: 16px;"), v("64px", "stroke-width: 64px;"), v("50%", "stroke-width: 50%;"), v("80%", "stroke-width: 80%;"), v("30%", "stroke-width: 30%;"), v("65%", "stroke-width: 65%;"), v("15%", "stroke-width: 15%;"), v("100%", "stroke-width: 100%;"), v("calc(24px)", "stroke-width: calc(24px);"), v("clamp(24px, 2em, 48px)", "stroke-width: clamp(24px, 2em, 48px);"), v("min(24px)", "stroke-width: min(24px);"), v("max(24px)", "stroke-width: max(24px);"), v("round(nearest, 24px, 2em)", "stroke-width: round(nearest, 24px, 2em);"), v("abs(24px)", "stroke-width: abs(24px);"), v("var(--my-var, 48px)", "stroke-width: var(--my-var, 48px);"), v("env(my-ident, 48px)", "stroke-width: env(my-ident, 48px);"), v("thin", "stroke-width: thin;"), v("medium", "stroke-width: medium;"), v("thick", "stroke-width: thick;"), v("1", "stroke-width: 1;"), v("0.5", "stroke-width: 0.5;"), v("2", "stroke-width: 2;"), v("0.75", "stroke-width: 0.75;"), v("0.25", "stroke-width: 0.25;"), ], }, { number: 473, name: "vector-effect", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003evector-effect\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property suppresses specific \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/transform\"\u003etransformation effects\u003c/a\u003e in SVG, thus permitting effects like a road on a map staying the same width no matter how the map is zoomed, or allowing a diagram key to retain its position and size regardless of other transforms. It can only be used with SVG elements that accept the \u003ca href=\"/en-US/docs/Web/SVG/Reference/Attribute/vector-effect\"\u003e\u003ccode\u003evector-effect\u003c/code\u003e\u003c/a\u003e attribute. When used, the CSS value overrides any values of the element's \u003ccode\u003evector-effect\u003c/code\u003e attribute.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | \"non-scaling-stroke\" | \"non-scaling-size\" | \"non-rotation\" | \"fixed-position\"", ebnf: "vector-effect =\n \"none\" | \"non-scaling-stroke\" | \"non-scaling-size\" | \"non-rotation\" | \"fixed-position\"", valueType: "keyword", defaultValue: "non-scaling-stroke", related: [], provenance: "pure", truncated: false, trueCount: 5, shown: 5, assists: [], values: [ v("none", "vector-effect: none;"), v("non-scaling-stroke", "vector-effect: non-scaling-stroke;"), v("non-scaling-size", "vector-effect: non-scaling-size;"), v("non-rotation", "vector-effect: non-rotation;"), v("fixed-position", "vector-effect: fixed-position;"), ], }, ], }, { id: "breaks", sigil: "33", title: "Breaks \u0026 Pagination", blurb: "Where content may break across pages and columns.", demo: "generic", sampleKind: "box", group: "families", focus: false, gallery: false, count: 9, properties: [ { number: 474, name: "break-after", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebreak-after\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets how page, column, or region breaks should behave after a generated box. If there is no generated box, the property is ignored.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"avoid\" | \"always\" | \"all\" | \"avoid-page\" | \"page\" | \"left\" | \"right\" | \"recto\" | \"verso\" | \"avoid-column\" | \"column\" | \"avoid-region\" | \"region\"", ebnf: "break-after =\n \"auto\" | \"avoid\" | \"always\" | \"all\" | \"avoid-page\" | \"page\" | \"left\" | \"right\" | \"recto\" | \"verso\" | \"avoid-column\" | \"column\" | \"avoid-region\" | \"region\"", valueType: "keyword", defaultValue: "avoid", related: [], provenance: "pure", truncated: false, trueCount: 14, shown: 14, assists: [], values: [ v("auto", "break-after: auto;"), v("avoid", "break-after: avoid;"), v("always", "break-after: always;"), v("all", "break-after: all;"), v("avoid-page", "break-after: avoid-page;"), v("page", "break-after: page;"), v("left", "break-after: left;"), v("right", "break-after: right;"), v("recto", "break-after: recto;"), v("verso", "break-after: verso;"), v("avoid-column", "break-after: avoid-column;"), v("column", "break-after: column;"), v("avoid-region", "break-after: avoid-region;"), v("region", "break-after: region;"), ], }, { number: 475, name: "break-before", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebreak-before\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets how page, column, or region breaks should behave before a generated box. If there is no generated box, the property is ignored.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"avoid\" | \"always\" | \"all\" | \"avoid-page\" | \"page\" | \"left\" | \"right\" | \"recto\" | \"verso\" | \"avoid-column\" | \"column\" | \"avoid-region\" | \"region\"", ebnf: "break-before =\n \"auto\" | \"avoid\" | \"always\" | \"all\" | \"avoid-page\" | \"page\" | \"left\" | \"right\" | \"recto\" | \"verso\" | \"avoid-column\" | \"column\" | \"avoid-region\" | \"region\"", valueType: "keyword", defaultValue: "avoid", related: [], provenance: "pure", truncated: false, trueCount: 14, shown: 14, assists: [], values: [ v("auto", "break-before: auto;"), v("avoid", "break-before: avoid;"), v("always", "break-before: always;"), v("all", "break-before: all;"), v("avoid-page", "break-before: avoid-page;"), v("page", "break-before: page;"), v("left", "break-before: left;"), v("right", "break-before: right;"), v("recto", "break-before: recto;"), v("verso", "break-before: verso;"), v("avoid-column", "break-before: avoid-column;"), v("column", "break-before: column;"), v("avoid-region", "break-before: avoid-region;"), v("region", "break-before: region;"), ], }, { number: 476, name: "break-inside", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebreak-inside\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets how page, column, or region breaks should behave inside a generated box. If there is no generated box, the property is ignored.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"avoid\" | \"avoid-page\" | \"avoid-column\" | \"avoid-region\"", ebnf: "break-inside =\n \"auto\" | \"avoid\" | \"avoid-page\" | \"avoid-column\" | \"avoid-region\"", valueType: "keyword", defaultValue: "avoid", related: [], provenance: "pure", truncated: false, trueCount: 5, shown: 5, assists: [], values: [ v("auto", "break-inside: auto;"), v("avoid", "break-inside: avoid;"), v("avoid-page", "break-inside: avoid-page;"), v("avoid-column", "break-inside: avoid-column;"), v("avoid-region", "break-inside: avoid-region;"), ], }, { number: 477, name: "orphans", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eorphans\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the minimum number of lines in a block container that must be shown at the \u003cem\u003ebottom\u003c/em\u003e of a \u003ca href=\"/en-US/docs/Web/CSS/Guides/Paged_media\"\u003epage\u003c/a\u003e, region, or \u003ca href=\"/en-US/docs/Web/CSS/Guides/Multicol_layout\"\u003ecolumn\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "positive_integer_type | VarFn", ebnf: "orphans =\n positive_integer_type | VarFn", valueType: "number", defaultValue: "3", related: [], provenance: "assisted", truncated: false, trueCount: 6, shown: 6, assists: [{ type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cinteger [1,∞]\u003e", samples: ["2", "3", "1", "5", "4"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("2", "orphans: 2;"), v("3", "orphans: 3;"), v("1", "orphans: 1;"), v("5", "orphans: 5;"), v("4", "orphans: 4;"), v("var(--my-var, 0.5)", "orphans: var(--my-var, 0.5);"), ], }, { number: 478, name: "page", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003epage\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property is used to specify the named page, a specific type of page defined by the \u003ca href=\"/en-US/docs/Web/CSS/Reference/At-rules/@page\"\u003e\u003ccode\u003e@page\u003c/code\u003e\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Syntax/At-rules\"\u003eat-rule\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | custom_ident_type", ebnf: "page =\n \"auto\" | custom_ident_type", valueType: "keyword", defaultValue: "my-ident", related: [], provenance: "assisted", truncated: false, trueCount: 3, shown: 3, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }], values: [ v("auto", "page: auto;"), v("my-ident", "page: my-ident;"), v("tag-a", "page: tag-a;"), ], }, { number: 479, name: "page-break-after", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003epage-break-after\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property adjusts page breaks \u003cem\u003eafter\u003c/em\u003e the current element.", experimental: false, nonstandard: false, deprecated: true, warning: "\u003cstrong\u003eWarning:\u003c/strong\u003e This property has been replaced by the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/break-after\"\u003e\u003ccode\u003ebreak-after\u003c/code\u003e\u003c/a\u003e property.", syntax: "\"auto\" | \"always\" | \"avoid\" | \"left\" | \"right\" | \"inherit\"", ebnf: "page-break-after =\n \"auto\" | \"always\" | \"avoid\" | \"left\" | \"right\" | \"inherit\"", valueType: "keyword", defaultValue: "always", related: [], provenance: "pure", truncated: false, trueCount: 6, shown: 6, assists: [], values: [ v("auto", "page-break-after: auto;"), v("always", "page-break-after: always;"), v("avoid", "page-break-after: avoid;"), v("left", "page-break-after: left;"), v("right", "page-break-after: right;"), v("inherit", "page-break-after: inherit;"), ], }, { number: 480, name: "page-break-before", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003epage-break-before\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property adjusts page breaks \u003cem\u003ebefore\u003c/em\u003e the current element.", experimental: false, nonstandard: false, deprecated: true, warning: "\u003cstrong\u003eWarning:\u003c/strong\u003e This property has been replaced by the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/break-before\"\u003e\u003ccode\u003ebreak-before\u003c/code\u003e\u003c/a\u003e property.", syntax: "\"auto\" | \"always\" | \"avoid\" | \"left\" | \"right\" | \"inherit\"", ebnf: "page-break-before =\n \"auto\" | \"always\" | \"avoid\" | \"left\" | \"right\" | \"inherit\"", valueType: "keyword", defaultValue: "always", related: [], provenance: "pure", truncated: false, trueCount: 6, shown: 6, assists: [], values: [ v("auto", "page-break-before: auto;"), v("always", "page-break-before: always;"), v("avoid", "page-break-before: avoid;"), v("left", "page-break-before: left;"), v("right", "page-break-before: right;"), v("inherit", "page-break-before: inherit;"), ], }, { number: 481, name: "page-break-inside", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003epage-break-inside\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property adjusts page breaks \u003cem\u003einside\u003c/em\u003e the current element.", experimental: false, nonstandard: false, deprecated: true, warning: "\u003cstrong\u003eWarning:\u003c/strong\u003e This property has been replaced by the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/break-inside\"\u003e\u003ccode\u003ebreak-inside\u003c/code\u003e\u003c/a\u003e property.", syntax: "\"avoid\" | \"auto\" | \"inherit\"", ebnf: "page-break-inside =\n \"avoid\" | \"auto\" | \"inherit\"", valueType: "keyword", defaultValue: "auto", related: [], provenance: "pure", truncated: false, trueCount: 3, shown: 3, assists: [], values: [ v("avoid", "page-break-inside: avoid;"), v("auto", "page-break-inside: auto;"), v("inherit", "page-break-inside: inherit;"), ], }, { number: 482, name: "widows", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ewidows\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the minimum number of lines in a block container that must be shown at the \u003cem\u003etop\u003c/em\u003e of a \u003ca href=\"/en-US/docs/Web/CSS/Guides/Paged_media\"\u003epage\u003c/a\u003e, region, or \u003ca href=\"/en-US/docs/Web/CSS/Guides/Multicol_layout\"\u003ecolumn\u003c/a\u003e.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "positive_integer_type | VarFn", ebnf: "widows =\n positive_integer_type | VarFn", valueType: "number", defaultValue: "3", related: [], provenance: "assisted", truncated: false, trueCount: 6, shown: 6, assists: [{ type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cinteger [1,∞]\u003e", samples: ["2", "3", "1", "5", "4"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("2", "widows: 2;"), v("3", "widows: 3;"), v("1", "widows: 1;"), v("5", "widows: 5;"), v("4", "widows: 4;"), v("var(--my-var, 0.5)", "widows: var(--my-var, 0.5);"), ], }, ], }, { id: "misc", sigil: "34", title: "Misc / Global", blurb: "Cross-cutting and global keywords that resist classification.", demo: "generic", sampleKind: "box", group: "families", focus: false, gallery: false, count: 33, properties: [ { number: 483, name: "all", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eall\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties\"\u003eshorthand\u003c/a\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property resets all of an element's properties except \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/unicode-bidi\"\u003e\u003ccode\u003eunicode-bidi\u003c/code\u003e\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/direction\"\u003e\u003ccode\u003edirection\u003c/code\u003e\u003c/a\u003e, and \u003ca href=\"/en-US/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties\"\u003eCSS Custom Properties\u003c/a\u003e. It can set properties to their initial or inherited values, or to the values specified in another cascade layer or stylesheet origin.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"initial\" | \"inherit\" | \"unset\" | \"revert\" | \"revert-layer\" | \"revert-rule\"", ebnf: "all =\n \"initial\" | \"inherit\" | \"unset\" | \"revert\" | \"revert-layer\" | \"revert-rule\"", valueType: "keyword", defaultValue: "inherit", related: [], provenance: "pure", truncated: false, trueCount: 6, shown: 6, assists: [], values: [ v("initial", "all: initial;"), v("inherit", "all: inherit;"), v("unset", "all: unset;"), v("revert", "all: revert;"), v("revert-layer", "all: revert-layer;"), v("revert-rule", "all: revert-rule;"), ], }, { number: 484, name: "baseline-source", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebaseline-source\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines which \u003ca href=\"/en-US/docs/Web/CSS/Reference/Values/baseline-position\"\u003ebaseline\u003c/a\u003e to use when inline-level boxes have multiple possible baselines, such as multi-line \u003ca href=\"/en-US/docs/Web/CSS/Guides/Display/Block_and_inline_layout\"\u003einline blocks\u003c/a\u003e or inline \u003ca href=\"/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts#the_flex_container\"\u003eflex containers\u003c/a\u003e. The values allow for choosing between aligning to the box's first baseline, last baseline, or letting the browser decide automatically based on the box type.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"first\" | \"last\"", ebnf: "baseline-source =\n \"auto\" | \"first\" | \"last\"", valueType: "keyword", defaultValue: "first", related: [], provenance: "pure", truncated: false, trueCount: 3, shown: 3, assists: [], values: [ v("auto", "baseline-source: auto;"), v("first", "baseline-source: first;"), v("last", "baseline-source: last;"), ], }, { number: 485, name: "box-align", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebox-align\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies how an element aligns its contents across its layout in a perpendicular direction. The effect of the property is only visible if there is extra space in the box.", experimental: false, nonstandard: true, deprecated: true, warning: "\u003cstrong\u003eWarning:\u003c/strong\u003e This is a property of the original CSS flexible box layout Module draft, and has been replaced by a newer standard.", syntax: "\"start\" | \"center\" | \"end\" | \"baseline\" | \"stretch\"", ebnf: "box-align =\n \"start\" | \"center\" | \"end\" | \"baseline\" | \"stretch\"", valueType: "keyword", defaultValue: "center", related: [], provenance: "pure", truncated: false, trueCount: 5, shown: 5, assists: [], values: [ v("start", "box-align: start;"), v("center", "box-align: center;"), v("end", "box-align: end;"), v("baseline", "box-align: baseline;"), v("stretch", "box-align: stretch;"), ], }, { number: 486, name: "box-decoration-break", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebox-decoration-break\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies how an element's \u003ca href=\"/en-US/docs/Web/CSS/Guides/Fragmentation\"\u003efragments\u003c/a\u003e should be rendered when broken across multiple lines, columns, or pages.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"slice\" | \"clone\"", ebnf: "box-decoration-break =\n \"slice\" | \"clone\"", valueType: "keyword", defaultValue: "clone", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("slice", "box-decoration-break: slice;"), v("clone", "box-decoration-break: clone;"), ], }, { number: 487, name: "box-flex", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003e-moz-box-flex\u003c/code\u003e\u003c/strong\u003e and \u003cstrong\u003e\u003ccode\u003e-webkit-box-flex\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e properties specify how a \u003ccode\u003e-moz-box\u003c/code\u003e or \u003ccode\u003e-webkit-box\u003c/code\u003e grows to fill the box that contains it, in the direction of the containing box's layout.", experimental: false, nonstandard: true, deprecated: true, warning: "\u003cstrong\u003eWarning:\u003c/strong\u003e This is a property for controlling parts of the XUL box model. It does not match either the old CSS flexible box layout Module drafts for \u003ccode\u003ebox-flex\u003c/code\u003e (which were based on this property) or the behavior of \u003ccode\u003e-webkit-box-flex\u003c/code\u003e (which is based on those drafts). See \u003ca href=\"/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts\"\u003eflexbox\u003c/a\u003e for information about the current standard.", syntax: "NumberType", ebnf: "box-flex =\n NumberType", valueType: "number", defaultValue: "0.5", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }], values: [ v("1", "box-flex: 1;"), v("0.5", "box-flex: 0.5;"), v("2", "box-flex: 2;"), v("0.75", "box-flex: 0.75;"), v("0.25", "box-flex: 0.25;"), ], }, { number: 488, name: "box-flex-group", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebox-flex-group\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property assigns the flexbox's child elements to a flex group.", experimental: false, nonstandard: true, deprecated: true, warning: "\u003cstrong\u003eWarning:\u003c/strong\u003e This is a property of the original CSS flexible box layout Module draft. It has been replaced in the specification. See \u003ca href=\"/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts\"\u003eflexbox\u003c/a\u003e for information about the current standard.", syntax: "IntegerType", ebnf: "box-flex-group =\n IntegerType", valueType: "number", defaultValue: "1", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "\u003cinteger\u003e", samples: ["2", "1", "3", "5", "4"] }], values: [ v("2", "box-flex-group: 2;"), v("1", "box-flex-group: 1;"), v("3", "box-flex-group: 3;"), v("5", "box-flex-group: 5;"), v("4", "box-flex-group: 4;"), ], }, { number: 489, name: "box-lines", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebox-lines\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property determines whether the box may have a single or multiple lines (rows for horizontally oriented boxes, columns for vertically oriented boxes).", experimental: false, nonstandard: true, deprecated: true, warning: "\u003cstrong\u003eWarning:\u003c/strong\u003e This is a property of the original CSS flexible box layout Module draft. It has been replaced in the specification. See \u003ca href=\"/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts\"\u003eflexbox\u003c/a\u003e for information about the current standard.", syntax: "\"single\" | \"multiple\"", ebnf: "box-lines =\n \"single\" | \"multiple\"", valueType: "keyword", defaultValue: "multiple", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("single", "box-lines: single;"), v("multiple", "box-lines: multiple;"), ], }, { number: 490, name: "box-ordinal-group", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebox-ordinal-group\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property assigns the flexbox's child elements to an ordinal group.", experimental: false, nonstandard: true, deprecated: true, warning: "\u003cstrong\u003eWarning:\u003c/strong\u003e This is a property of the original CSS flexible box layout Module draft. It has been replaced in the specification. See \u003ca href=\"/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts\"\u003eflexbox\u003c/a\u003e for information about the current standard.", syntax: "IntegerType", ebnf: "box-ordinal-group =\n IntegerType", valueType: "number", defaultValue: "1", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "\u003cinteger\u003e", samples: ["2", "1", "3", "5", "4"] }], values: [ v("2", "box-ordinal-group: 2;"), v("1", "box-ordinal-group: 1;"), v("3", "box-ordinal-group: 3;"), v("5", "box-ordinal-group: 5;"), v("4", "box-ordinal-group: 4;"), ], }, { number: 491, name: "box-orient", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ebox-orient\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets whether an element lays out its contents horizontally or vertically.", experimental: false, nonstandard: true, deprecated: true, warning: "\u003cstrong\u003eWarning:\u003c/strong\u003e This is a property of the original CSS flexible box layout Module draft, and has been replaced by a newer standard. See \u003ca href=\"/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts\"\u003eflexbox\u003c/a\u003e for information about the current standard.", syntax: "\"horizontal\" | \"vertical\" | \"inline-axis\" | \"block-axis\"", ebnf: "box-orient =\n \"horizontal\" | \"vertical\" | \"inline-axis\" | \"block-axis\"", valueType: "keyword", defaultValue: "vertical", related: [], provenance: "pure", truncated: false, trueCount: 4, shown: 4, assists: [], values: [ v("horizontal", "box-orient: horizontal;"), v("vertical", "box-orient: vertical;"), v("inline-axis", "box-orient: inline-axis;"), v("block-axis", "box-orient: block-axis;"), ], }, { number: 492, name: "box-pack", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003e-moz-box-pack\u003c/code\u003e\u003c/strong\u003e and \u003cstrong\u003e\u003ccode\u003e-webkit-box-pack\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e properties specify how a \u003ccode\u003e-moz-box\u003c/code\u003e or \u003ccode\u003e-webkit-box\u003c/code\u003e packs its contents in the direction of its layout. The effect of this is only visible if there is extra space in the box.", experimental: false, nonstandard: true, deprecated: true, warning: "\u003cstrong\u003eWarning:\u003c/strong\u003e This is a property of the original CSS flexible box layout Module draft, and has been replaced by a newer standard. See \u003ca href=\"/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts\"\u003eflexbox\u003c/a\u003e for information about the current standard.", syntax: "\"start\" | \"center\" | \"end\" | \"justify\"", ebnf: "box-pack =\n \"start\" | \"center\" | \"end\" | \"justify\"", valueType: "keyword", defaultValue: "center", related: [], provenance: "pure", truncated: false, trueCount: 4, shown: 4, assists: [], values: [ v("start", "box-pack: start;"), v("center", "box-pack: center;"), v("end", "box-pack: end;"), v("justify", "box-pack: justify;"), ], }, { number: 493, name: "content", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003econtent\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property replaces content with a generated value. It can be used to define what is rendered inside an element or pseudo-element. For elements, the \u003ccode\u003econtent\u003c/code\u003e property specifies whether the element renders normally (\u003ccode\u003enormal\u003c/code\u003e or \u003ccode\u003enone\u003c/code\u003e) or is replaced with an image (and associated \"alt\" text). For pseudo-elements and margin boxes, \u003ccode\u003econtent\u003c/code\u003e defines the content as images, text, both, or none, which determines whether the element renders at all.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | \"none\" | ( ContentReplacementType | ContentListType ) , [ \"/\" , ContentPropItem , { ContentPropItem } ] | ElementFn", ebnf: "content =\n \"normal\" | \"none\" | ( ContentReplacementType | ContentListType ) , [ \"/\" , ContentPropItem , { ContentPropItem } ] | ElementFn", valueType: "function", defaultValue: "none", related: [], provenance: "assisted", truncated: true, trueCount: 90, shown: 50, assists: [{ type: "\u003cangle\u003e", samples: ["45deg", "135deg", "250deg", "320deg", "90deg"] }, { type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003chex-color\u003e", samples: ["#c5483c", "#2f5fd0"] }, { type: "\u003cident\u003e", samples: ["alpha", "beta"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }, { type: "\u003cresolution\u003e", samples: ["96dpi", "2x", "300dpi"] }, { type: "\u003cstring\u003e", samples: ["\"Specimen\"", "\"Aa\""] }, { type: "ConicGradientFn", samples: ["conic-gradient(from 20deg, #c5483c, #e0a13c, #2f8f6b, #2f5fd0, #c5483c)"] }, { type: "LinearGradientFn", samples: ["linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)"] }, { type: "RadialGradientFn", samples: ["radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)"] }, { type: "RepeatingConicGradientFn", samples: ["repeating-conic-gradient(from 0deg, #c5483c 0 30deg, #2f5fd0 30deg 60deg)"] }, { type: "RepeatingLinearGradientFn", samples: ["repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)"] }, { type: "RepeatingRadialGradientFn", samples: ["repeating-radial-gradient(circle, #c5483c 0 12px, #2f5fd0 12px 24px)"] }, { type: "UrlType", samples: ["url(assets/photo.jpg)"] }], values: [ v("normal", "content: normal;"), v("none", "content: none;"), v("url(assets/photo.jpg)/ \"Specimen\"", "content: url(assets/photo.jpg)/ \"Specimen\";"), v("url(assets/photo.jpg)/ \"Aa\"", "content: url(assets/photo.jpg)/ \"Aa\";"), v("url(assets/photo.jpg)/ counter(my-ident, tag-a)", "content: url(assets/photo.jpg)/ counter(my-ident, tag-a);"), v("url(assets/photo.jpg)/ counters(my-ident, \"Aa\", my-ident)", "content: url(assets/photo.jpg)/ counters(my-ident, \"Aa\", my-ident);"), v("url(assets/photo.jpg)/ attr(alpha | beta type(\"Specimen\"),)", "content: url(assets/photo.jpg)/ attr(alpha | beta type(\"Specimen\"),);"), v("url(assets/photo.jpg)", "content: url(assets/photo.jpg);"), v("image(ltr url(assets/photo.jpg))/ \"Specimen\"", "content: image(ltr url(assets/photo.jpg))/ \"Specimen\";"), v("image(ltr url(assets/photo.jpg))/ \"Aa\"", "content: image(ltr url(assets/photo.jpg))/ \"Aa\";"), v("image(ltr url(assets/photo.jpg))/ counter(my-ident, tag-a)", "content: image(ltr url(assets/photo.jpg))/ counter(my-ident, tag-a);"), v("image(ltr url(assets/photo.jpg))/ counters(my-ident, \"Aa\", my-ident)", "content: image(ltr url(assets/photo.jpg))/ counters(my-ident, \"Aa\", my-ident);"), v("image(ltr url(assets/photo.jpg))/ attr(alpha | beta type(\"Specimen\"),)", "content: image(ltr url(assets/photo.jpg))/ attr(alpha | beta type(\"Specimen\"),);"), v("image(ltr url(assets/photo.jpg))", "content: image(ltr url(assets/photo.jpg));"), v("image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\"))/ \"Specimen\"", "content: image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\"))/ \"Specimen\";"), v("image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\"))/ \"Aa\"", "content: image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\"))/ \"Aa\";"), v("image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\"))/ counter(my-ident, tag-a)", "content: image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\"))/ counter(my-ident, tag-a);"), v("image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\"))/ counters(my-ident, \"Aa\", my-ident)", "content: image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\"))/ counters(my-ident, \"Aa\", my-ident);"), v("image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\"))/ attr(alpha | beta type(\"Specimen\"),)", "content: image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\"))/ attr(alpha | beta type(\"Specimen\"),);"), v("image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\"))", "content: image-set(url(assets/photo.jpg) 300dpi type(\"Specimen\"));"), v("cross-fade(url(assets/photo.jpg) 30%)/ \"Specimen\"", "content: cross-fade(url(assets/photo.jpg) 30%)/ \"Specimen\";"), v("cross-fade(url(assets/photo.jpg) 30%)/ \"Aa\"", "content: cross-fade(url(assets/photo.jpg) 30%)/ \"Aa\";"), v("cross-fade(url(assets/photo.jpg) 30%)/ counter(my-ident, tag-a)", "content: cross-fade(url(assets/photo.jpg) 30%)/ counter(my-ident, tag-a);"), v("cross-fade(url(assets/photo.jpg) 30%)/ counters(my-ident, \"Aa\", my-ident)", "content: cross-fade(url(assets/photo.jpg) 30%)/ counters(my-ident, \"Aa\", my-ident);"), v("cross-fade(url(assets/photo.jpg) 30%)/ attr(alpha | beta type(\"Specimen\"),)", "content: cross-fade(url(assets/photo.jpg) 30%)/ attr(alpha | beta type(\"Specimen\"),);"), v("cross-fade(url(assets/photo.jpg) 30%)", "content: cross-fade(url(assets/photo.jpg) 30%);"), v("element(#alpha)/ \"Specimen\"", "content: element(#alpha)/ \"Specimen\";"), v("element(#alpha)/ \"Aa\"", "content: element(#alpha)/ \"Aa\";"), v("element(#alpha)/ counter(my-ident, tag-a)", "content: element(#alpha)/ counter(my-ident, tag-a);"), v("element(#alpha)/ counters(my-ident, \"Aa\", my-ident)", "content: element(#alpha)/ counters(my-ident, \"Aa\", my-ident);"), v("element(#alpha)/ attr(alpha | beta type(\"Specimen\"),)", "content: element(#alpha)/ attr(alpha | beta type(\"Specimen\"),);"), v("element(#alpha)", "content: element(#alpha);"), v("linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)/ \"Specimen\"", "content: linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)/ \"Specimen\";"), v("linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)/ \"Aa\"", "content: linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)/ \"Aa\";"), v("linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)/ counter(my-ident, tag-a)", "content: linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)/ counter(my-ident, tag-a);"), v("linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)/ counters(my-ident, \"Aa\", my-ident)", "content: linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)/ counters(my-ident, \"Aa\", my-ident);"), v("linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)/ attr(alpha | beta type(\"Specimen\"),)", "content: linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)/ attr(alpha | beta type(\"Specimen\"),);"), v("linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0)", "content: linear-gradient(135deg, #c5483c, #e0a13c, #2f5fd0);"), v("repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)/ \"Specimen\"", "content: repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)/ \"Specimen\";"), v("repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)/ \"Aa\"", "content: repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)/ \"Aa\";"), v("repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)/ counter(my-ident, tag-a)", "content: repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)/ counter(my-ident, tag-a);"), v("repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)/ counters(my-ident, \"Aa\", my-ident)", "content: repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)/ counters(my-ident, \"Aa\", my-ident);"), v("repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)/ attr(alpha | beta type(\"Specimen\"),)", "content: repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)/ attr(alpha | beta type(\"Specimen\"),);"), v("repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px)", "content: repeating-linear-gradient(45deg, #c5483c 0 12px, #2f5fd0 12px 24px);"), v("radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)/ \"Specimen\"", "content: radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)/ \"Specimen\";"), v("radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)/ \"Aa\"", "content: radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)/ \"Aa\";"), v("radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)/ counter(my-ident, tag-a)", "content: radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)/ counter(my-ident, tag-a);"), v("radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)/ counters(my-ident, \"Aa\", my-ident)", "content: radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)/ counters(my-ident, \"Aa\", my-ident);"), v("radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)/ attr(alpha | beta type(\"Specimen\"),)", "content: radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)/ attr(alpha | beta type(\"Specimen\"),);"), v("radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0)", "content: radial-gradient(circle at 40% 40%, #e0a13c, #c5483c, #2f5fd0);"), ], }, { number: 494, name: "dynamic-range-limit", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003edynamic-range-limit\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the maximum luminance allowed for High Dynamic Range (HDR) content.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"standard\" | \"no-limit\" | \"constrained\" | DynamicRangeLimitMixFn", ebnf: "dynamic-range-limit =\n \"standard\" | \"no-limit\" | \"constrained\" | DynamicRangeLimitMixFn", valueType: "keyword", defaultValue: "no-limit", related: [], provenance: "assisted", truncated: false, trueCount: 4, shown: 4, assists: [{ type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("standard", "dynamic-range-limit: standard;"), v("no-limit", "dynamic-range-limit: no-limit;"), v("constrained", "dynamic-range-limit: constrained;"), v("dynamic-range-limit-mix(standard 50%, standard 80%)", "dynamic-range-limit: dynamic-range-limit-mix(standard 50%, standard 80%);"), ], }, { number: 495, name: "hanging-punctuation", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ehanging-punctuation\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies whether a punctuation mark should hang at the start or end of a line of text. Hanging punctuation may be placed outside the line box.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\"\n | \"first\" , [ HangingPunctuationForceItem , [ \"last\" ] | \"last\" , [ HangingPunctuationForceItem ] ]\n | HangingPunctuationForceItem , [ \"first\" , [ \"last\" ] | \"last\" , [ \"first\" ] ]\n | \"last\" , [ \"first\" , [ HangingPunctuationForceItem ] | HangingPunctuationForceItem , [ \"first\" ] ]", ebnf: "hanging-punctuation =\n \"none\"\n | \"first\" , [ HangingPunctuationForceItem , [ \"last\" ] | \"last\" , [ HangingPunctuationForceItem ] ]\n | HangingPunctuationForceItem , [ \"first\" , [ \"last\" ] | \"last\" , [ \"first\" ] ]\n | \"last\" , [ \"first\" , [ HangingPunctuationForceItem ] | HangingPunctuationForceItem , [ \"first\" ] ]", valueType: "keyword", defaultValue: "first force-end last", related: [], provenance: "pure", truncated: false, trueCount: 27, shown: 27, assists: [], values: [ v("none", "hanging-punctuation: none;"), v("first force-end last", "hanging-punctuation: first force-end last;"), v("first force-end", "hanging-punctuation: first force-end;"), v("first allow-end last", "hanging-punctuation: first allow-end last;"), v("first allow-end", "hanging-punctuation: first allow-end;"), v("first last force-end", "hanging-punctuation: first last force-end;"), v("first last allow-end", "hanging-punctuation: first last allow-end;"), v("first last", "hanging-punctuation: first last;"), v("first", "hanging-punctuation: first;"), v("force-end first last", "hanging-punctuation: force-end first last;"), v("force-end first", "hanging-punctuation: force-end first;"), v("force-end last first", "hanging-punctuation: force-end last first;"), v("force-end last", "hanging-punctuation: force-end last;"), v("force-end", "hanging-punctuation: force-end;"), v("allow-end first last", "hanging-punctuation: allow-end first last;"), v("allow-end first", "hanging-punctuation: allow-end first;"), v("allow-end last first", "hanging-punctuation: allow-end last first;"), v("allow-end last", "hanging-punctuation: allow-end last;"), v("allow-end", "hanging-punctuation: allow-end;"), v("last first force-end", "hanging-punctuation: last first force-end;"), v("last first allow-end", "hanging-punctuation: last first allow-end;"), v("last first", "hanging-punctuation: last first;"), v("last force-end first", "hanging-punctuation: last force-end first;"), v("last force-end", "hanging-punctuation: last force-end;"), v("last allow-end first", "hanging-punctuation: last allow-end first;"), v("last allow-end", "hanging-punctuation: last allow-end;"), v("last", "hanging-punctuation: last;"), ], }, { number: 496, name: "initial-letter", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003einitial-letter\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the size and sink for dropped, raised, and sunken initial letters. This property applies to \u003ca href=\"/en-US/docs/Web/CSS/Reference/Selectors/::first-letter\"\u003e\u003ccode\u003e::first-letter\u003c/code\u003e\u003c/a\u003e pseudo-elements and inline-level first children of block containers.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | InitialLetterSizeType , IntegerType | InitialLetterSizeType , [ ( \"drop\" | \"raise\" ) ]", ebnf: "initial-letter =\n \"normal\" | InitialLetterSizeType , IntegerType | InitialLetterSizeType , [ ( \"drop\" | \"raise\" ) ]", valueType: "keyword", defaultValue: "2 2", related: [], provenance: "assisted", truncated: false, trueCount: 41, shown: 41, assists: [{ type: "\u003cinteger\u003e", samples: ["2", "1", "3", "5", "4"] }, { type: "InitialLetterSizeType", samples: ["2", "1.5", "3", "1", "2.5"] }], values: [ v("normal", "initial-letter: normal;"), v("2 2", "initial-letter: 2 2;"), v("2 1", "initial-letter: 2 1;"), v("2 3", "initial-letter: 2 3;"), v("2 5", "initial-letter: 2 5;"), v("2 4", "initial-letter: 2 4;"), v("1.5 2", "initial-letter: 1.5 2;"), v("1.5 1", "initial-letter: 1.5 1;"), v("1.5 3", "initial-letter: 1.5 3;"), v("1.5 5", "initial-letter: 1.5 5;"), v("1.5 4", "initial-letter: 1.5 4;"), v("3 2", "initial-letter: 3 2;"), v("3 1", "initial-letter: 3 1;"), v("3 3", "initial-letter: 3 3;"), v("3 5", "initial-letter: 3 5;"), v("3 4", "initial-letter: 3 4;"), v("1 2", "initial-letter: 1 2;"), v("1 1", "initial-letter: 1 1;"), v("1 3", "initial-letter: 1 3;"), v("1 5", "initial-letter: 1 5;"), v("1 4", "initial-letter: 1 4;"), v("2.5 2", "initial-letter: 2.5 2;"), v("2.5 1", "initial-letter: 2.5 1;"), v("2.5 3", "initial-letter: 2.5 3;"), v("2.5 5", "initial-letter: 2.5 5;"), v("2.5 4", "initial-letter: 2.5 4;"), v("2 drop", "initial-letter: 2 drop;"), v("2 raise", "initial-letter: 2 raise;"), v("2", "initial-letter: 2;"), v("1.5 drop", "initial-letter: 1.5 drop;"), v("1.5 raise", "initial-letter: 1.5 raise;"), v("1.5", "initial-letter: 1.5;"), v("3 drop", "initial-letter: 3 drop;"), v("3 raise", "initial-letter: 3 raise;"), v("3", "initial-letter: 3;"), v("1 drop", "initial-letter: 1 drop;"), v("1 raise", "initial-letter: 1 raise;"), v("1", "initial-letter: 1;"), v("2.5 drop", "initial-letter: 2.5 drop;"), v("2.5 raise", "initial-letter: 2.5 raise;"), v("2.5", "initial-letter: 2.5;"), ], }, { number: 497, name: "interactivity", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003einteractivity\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies whether an element and its descendant nodes are set to be \u003ca href=\"/en-US/docs/Web/HTML/Reference/Global_attributes/inert\"\u003einert\u003c/a\u003e.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"inert\"", ebnf: "interactivity =\n \"auto\" | \"inert\"", valueType: "keyword", defaultValue: "inert", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("auto", "interactivity: auto;"), v("inert", "interactivity: inert;"), ], }, { number: 498, name: "interest-delay", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003einterest-delay\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the delay between the user showing interest in an \u003ca href=\"/en-US/docs/Web/API/Popover_API/Using_interest_invokers\"\u003einterest invoker\u003c/a\u003e element and the \u003ca href=\"/en-US/docs/Web/API/HTMLElement/interest_event\" title=\"interest\"\u003e\u003ccode\u003einterest\u003c/code\u003e\u003c/a\u003e event firing, and the delay between the user losing interest and the \u003ca href=\"/en-US/docs/Web/API/HTMLElement/loseinterest_event\" title=\"loseinterest\"\u003e\u003ccode\u003eloseinterest\u003c/code\u003e\u003c/a\u003e event firing.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "InterestDelayStartProp , [ InterestDelayStartProp ]", ebnf: "interest-delay =\n InterestDelayStartProp , [ InterestDelayStartProp ]", valueType: "keyword", defaultValue: "0.3s", related: [], provenance: "assisted", truncated: false, trueCount: 4, shown: 4, assists: [{ type: "\u003ctime\u003e", samples: ["0.3s", "1s", "200ms"] }], values: [ v("normal", "interest-delay: normal;"), v("0.3s", "interest-delay: 0.3s;"), v("1s", "interest-delay: 1s;"), v("200ms", "interest-delay: 200ms;"), ], }, { number: 499, name: "interest-delay-end", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003einterest-delay-end\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the delay between the user losing interest in an \u003ca href=\"/en-US/docs/Web/API/Popover_API/Using_interest_invokers\"\u003einterest invoker\u003c/a\u003e element and the \u003ca href=\"/en-US/docs/Web/API/HTMLElement/loseinterest_event\" title=\"loseinterest\"\u003e\u003ccode\u003eloseinterest\u003c/code\u003e\u003c/a\u003e event firing.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | TimeType", ebnf: "interest-delay-end =\n \"normal\" | TimeType", valueType: "keyword", defaultValue: "0.3s", related: [], provenance: "assisted", truncated: false, trueCount: 4, shown: 4, assists: [{ type: "\u003ctime\u003e", samples: ["0.3s", "1s", "200ms"] }], values: [ v("normal", "interest-delay-end: normal;"), v("0.3s", "interest-delay-end: 0.3s;"), v("1s", "interest-delay-end: 1s;"), v("200ms", "interest-delay-end: 200ms;"), ], }, { number: 500, name: "interest-delay-start", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003einterest-delay-start\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies the delay between the user showing interest in an \u003ca href=\"/en-US/docs/Web/API/Popover_API/Using_interest_invokers\"\u003einterest invoker\u003c/a\u003e element and the \u003ca href=\"/en-US/docs/Web/API/HTMLElement/interest_event\" title=\"interest\"\u003e\u003ccode\u003einterest\u003c/code\u003e\u003c/a\u003e event firing.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | TimeType", ebnf: "interest-delay-start =\n \"normal\" | TimeType", valueType: "keyword", defaultValue: "0.3s", related: [], provenance: "assisted", truncated: false, trueCount: 4, shown: 4, assists: [{ type: "\u003ctime\u003e", samples: ["0.3s", "1s", "200ms"] }], values: [ v("normal", "interest-delay-start: normal;"), v("0.3s", "interest-delay-start: 0.3s;"), v("1s", "interest-delay-start: 1s;"), v("200ms", "interest-delay-start: 200ms;"), ], }, { number: 501, name: "interpolate-size", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003einterpolate-size\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property allows you to enable \u003ca href=\"/en-US/docs/Web/CSS/Guides/Animations\"\u003eanimations\u003c/a\u003e and \u003ca href=\"/en-US/docs/Web/CSS/Guides/Transitions\"\u003etransitions\u003c/a\u003e between a \u003ca href=\"/en-US/docs/Web/CSS/Reference/Values/length-percentage\"\u003e\u003ccode\u003e\u0026lt;length-percentage\u0026gt;\u003c/code\u003e\u003c/a\u003e value and an \u003ca href=\"/en-US/docs/Glossary/Intrinsic_Size\"\u003eintrinsic size\u003c/a\u003e, \u003ca href=\"/en-US/docs/Web/CSS/Reference/Values/fit-content\"\u003e\u003ccode\u003efit-content\u003c/code\u003e\u003c/a\u003e, or \u003ca href=\"/en-US/docs/Web/CSS/Reference/Values/max-content\"\u003e\u003ccode\u003emax-content\u003c/code\u003e\u003c/a\u003e.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "\"numeric-only\" | \"allow-keywords\"", ebnf: "interpolate-size =\n \"numeric-only\" | \"allow-keywords\"", valueType: "keyword", defaultValue: "allow-keywords", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("numeric-only", "interpolate-size: numeric-only;"), v("allow-keywords", "interpolate-size: allow-keywords;"), ], }, { number: 502, name: "line-clamp", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eline-clamp\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property allows limiting of the contents of a \u003ca href=\"/en-US/docs/Glossary/Block\"\u003eblock\u003c/a\u003e to the specified number of lines.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | ( [ IntegerType ] , [ BlockEllipsisType ] ) , [ \"-webkit-legacy\" ]", ebnf: "line-clamp =\n \"none\" | ( [ IntegerType ] , [ BlockEllipsisType ] ) , [ \"-webkit-legacy\" ]", valueType: "keyword", defaultValue: "2 no-ellipsis -webkit-legacy", related: [], provenance: "assisted", truncated: true, trueCount: 60, shown: 50, assists: [{ type: "\u003cinteger\u003e", samples: ["2", "1", "3", "5", "4"] }, { type: "\u003cstring\u003e", samples: ["\"Specimen\"", "\"Aa\""] }], values: [ v("none", "line-clamp: none;"), v("2 no-ellipsis -webkit-legacy", "line-clamp: 2 no-ellipsis -webkit-legacy;"), v("2 no-ellipsis", "line-clamp: 2 no-ellipsis;"), v("2 auto -webkit-legacy", "line-clamp: 2 auto -webkit-legacy;"), v("2 auto", "line-clamp: 2 auto;"), v("2 \"Specimen\" -webkit-legacy", "line-clamp: 2 \"Specimen\" -webkit-legacy;"), v("2 \"Specimen\"", "line-clamp: 2 \"Specimen\";"), v("2 \"Aa\" -webkit-legacy", "line-clamp: 2 \"Aa\" -webkit-legacy;"), v("2 \"Aa\"", "line-clamp: 2 \"Aa\";"), v("2 -webkit-legacy", "line-clamp: 2 -webkit-legacy;"), v("2", "line-clamp: 2;"), v("1 no-ellipsis -webkit-legacy", "line-clamp: 1 no-ellipsis -webkit-legacy;"), v("1 no-ellipsis", "line-clamp: 1 no-ellipsis;"), v("1 auto -webkit-legacy", "line-clamp: 1 auto -webkit-legacy;"), v("1 auto", "line-clamp: 1 auto;"), v("1 \"Specimen\" -webkit-legacy", "line-clamp: 1 \"Specimen\" -webkit-legacy;"), v("1 \"Specimen\"", "line-clamp: 1 \"Specimen\";"), v("1 \"Aa\" -webkit-legacy", "line-clamp: 1 \"Aa\" -webkit-legacy;"), v("1 \"Aa\"", "line-clamp: 1 \"Aa\";"), v("1 -webkit-legacy", "line-clamp: 1 -webkit-legacy;"), v("1", "line-clamp: 1;"), v("3 no-ellipsis -webkit-legacy", "line-clamp: 3 no-ellipsis -webkit-legacy;"), v("3 no-ellipsis", "line-clamp: 3 no-ellipsis;"), v("3 auto -webkit-legacy", "line-clamp: 3 auto -webkit-legacy;"), v("3 auto", "line-clamp: 3 auto;"), v("3 \"Specimen\" -webkit-legacy", "line-clamp: 3 \"Specimen\" -webkit-legacy;"), v("3 \"Specimen\"", "line-clamp: 3 \"Specimen\";"), v("3 \"Aa\" -webkit-legacy", "line-clamp: 3 \"Aa\" -webkit-legacy;"), v("3 \"Aa\"", "line-clamp: 3 \"Aa\";"), v("3 -webkit-legacy", "line-clamp: 3 -webkit-legacy;"), v("3", "line-clamp: 3;"), v("5 no-ellipsis -webkit-legacy", "line-clamp: 5 no-ellipsis -webkit-legacy;"), v("5 no-ellipsis", "line-clamp: 5 no-ellipsis;"), v("5 auto -webkit-legacy", "line-clamp: 5 auto -webkit-legacy;"), v("5 auto", "line-clamp: 5 auto;"), v("5 \"Specimen\" -webkit-legacy", "line-clamp: 5 \"Specimen\" -webkit-legacy;"), v("5 \"Specimen\"", "line-clamp: 5 \"Specimen\";"), v("5 \"Aa\" -webkit-legacy", "line-clamp: 5 \"Aa\" -webkit-legacy;"), v("5 \"Aa\"", "line-clamp: 5 \"Aa\";"), v("5 -webkit-legacy", "line-clamp: 5 -webkit-legacy;"), v("5", "line-clamp: 5;"), v("4 no-ellipsis -webkit-legacy", "line-clamp: 4 no-ellipsis -webkit-legacy;"), v("4 no-ellipsis", "line-clamp: 4 no-ellipsis;"), v("4 auto -webkit-legacy", "line-clamp: 4 auto -webkit-legacy;"), v("4 auto", "line-clamp: 4 auto;"), v("4 \"Specimen\" -webkit-legacy", "line-clamp: 4 \"Specimen\" -webkit-legacy;"), v("4 \"Specimen\"", "line-clamp: 4 \"Specimen\";"), v("4 \"Aa\" -webkit-legacy", "line-clamp: 4 \"Aa\" -webkit-legacy;"), v("4 \"Aa\"", "line-clamp: 4 \"Aa\";"), v("4 -webkit-legacy", "line-clamp: 4 -webkit-legacy;"), ], }, { number: 503, name: "line-height-step", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eline-height-step\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property sets the step unit for line box heights. When the property is set, line box heights are rounded up to the closest multiple of the unit.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "LengthType", ebnf: "line-height-step =\n LengthType", valueType: "length", defaultValue: "48px", related: [], provenance: "assisted", truncated: false, trueCount: 5, shown: 5, assists: [{ type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }], values: [ v("24px", "line-height-step: 24px;"), v("48px", "line-height-step: 48px;"), v("8px", "line-height-step: 8px;"), v("16px", "line-height-step: 16px;"), v("64px", "line-height-step: 64px;"), ], }, { number: 504, name: "math-depth", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003emath-depth\u003c/code\u003e\u003c/strong\u003e property describes a notion of \u003cem\u003edepth\u003c/em\u003e for each element of a mathematical formula, with respect to the top-level container of that formula. This is used to scale the computed value of the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/font-size\"\u003efont-size\u003c/a\u003e of elements when \u003ccode\u003efont-size: math\u003c/code\u003e is applied.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto-add\" | \"add\" , \"(\" , IntegerType , \")\" | IntegerType", ebnf: "math-depth =\n \"auto-add\" | \"add\" , \"(\" , IntegerType , \")\" | IntegerType", valueType: "number", defaultValue: "add(2)", related: [], provenance: "assisted", truncated: false, trueCount: 7, shown: 7, assists: [{ type: "\u003cinteger\u003e", samples: ["2", "1", "3", "5", "4"] }], values: [ v("auto-add", "math-depth: auto-add;"), v("add(2)", "math-depth: add(2);"), v("2", "math-depth: 2;"), v("1", "math-depth: 1;"), v("3", "math-depth: 3;"), v("5", "math-depth: 5;"), v("4", "math-depth: 4;"), ], }, { number: 505, name: "math-shift", maturity: "modern", description: "The \u003ccode\u003emath-shift\u003c/code\u003e property indicates whether superscripts inside MathML formulas should be raised by a normal or compact shift.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | \"compact\"", ebnf: "math-shift =\n \"normal\" | \"compact\"", valueType: "keyword", defaultValue: "compact", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("normal", "math-shift: normal;"), v("compact", "math-shift: compact;"), ], }, { number: 506, name: "math-style", maturity: "modern", description: "The \u003ccode\u003emath-style\u003c/code\u003e property indicates whether MathML equations should render with normal or compact height.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\" | \"compact\"", ebnf: "math-style =\n \"normal\" | \"compact\"", valueType: "keyword", defaultValue: "compact", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("normal", "math-style: normal;"), v("compact", "math-style: compact;"), ], }, { number: 507, name: "overlay", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eoverlay\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies whether an element appearing in the \u003ca href=\"/en-US/docs/Glossary/Top_layer\"\u003etop layer\u003c/a\u003e (for example, a shown \u003ca href=\"/en-US/docs/Web/API/Popover_API\"\u003epopover\u003c/a\u003e or modal \u003ca href=\"/en-US/docs/Web/HTML/Reference/Elements/dialog\"\u003e\u003ccode\u003e\u0026lt;dialog\u0026gt;\u003c/code\u003e\u003c/a\u003e element) is actually rendered in the top layer. This property is only relevant within a list of \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/transition-property\"\u003e\u003ccode\u003etransition-property\u003c/code\u003e\u003c/a\u003e values, and only if \u003ccode\u003eallow-discrete\u003c/code\u003e is set as the \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/transition-behavior\"\u003e\u003ccode\u003etransition-behavior\u003c/code\u003e\u003c/a\u003e.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "\"none\" | \"auto\"", ebnf: "overlay =\n \"none\" | \"auto\"", valueType: "keyword", defaultValue: "auto", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("none", "overlay: none;"), v("auto", "overlay: auto;"), ], }, { number: 508, name: "quotes", maturity: "modern", description: "The \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e \u003cstrong\u003e\u003ccode\u003equotes\u003c/code\u003e\u003c/strong\u003e property sets how the browser should render quotation marks that are automatically added to the HTML \u003ca href=\"/en-US/docs/Web/HTML/Reference/Elements/q\"\u003e\u003ccode\u003e\u0026lt;q\u0026gt;\u003c/code\u003e\u003c/a\u003e element or added using the \u003ccode\u003eopen-quotes\u003c/code\u003e or \u003ccode\u003eclose-quotes\u003c/code\u003e (or omitted using the \u003ccode\u003eno-open-quote\u003c/code\u003e and \u003ccode\u003eno-close-quote\u003c/code\u003e) values of the of the CSS \u003ca href=\"/en-US/docs/Web/CSS/Reference/Properties/content\"\u003e\u003ccode\u003econtent\u003c/code\u003e\u003c/a\u003e property.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"none\" | \"match-parent\" | QuotesPropItem , { QuotesPropItem }", ebnf: "quotes =\n \"auto\" | \"none\" | \"match-parent\" | QuotesPropItem , { QuotesPropItem }", valueType: "keyword", defaultValue: "none", related: [], provenance: "assisted", truncated: false, trueCount: 6, shown: 6, assists: [{ type: "QuotesPropItem", samples: ["\"\\201C\" \"\\201D\"", "\"\\00AB\" \"\\00BB\"", "\"\\2039\" \"\\203A\""] }], values: [ v("auto", "quotes: auto;"), v("none", "quotes: none;"), v("match-parent", "quotes: match-parent;"), v("\"\\201C\" \"\\201D\"", "quotes: \"\\201C\" \"\\201D\";"), v("\"\\00AB\" \"\\00BB\"", "quotes: \"\\00AB\" \"\\00BB\";"), v("\"\\2039\" \"\\203A\"", "quotes: \"\\2039\" \"\\203A\";"), ], }, { number: 509, name: "ruby-align", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eruby-align\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the distribution of the different ruby elements over the base.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"start\" | \"center\" | \"space-between\" | \"space-around\"", ebnf: "ruby-align =\n \"start\" | \"center\" | \"space-between\" | \"space-around\"", valueType: "keyword", defaultValue: "center", related: [], provenance: "pure", truncated: false, trueCount: 4, shown: 4, assists: [], values: [ v("start", "ruby-align: start;"), v("center", "ruby-align: center;"), v("space-between", "ruby-align: space-between;"), v("space-around", "ruby-align: space-around;"), ], }, { number: 510, name: "ruby-overhang", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eruby-overhang\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property specifies whether or not a \u003ca href=\"/en-US/docs/Web/HTML/Reference/Elements/ruby\"\u003e\u003ccode\u003e\u0026lt;ruby\u0026gt;\u003c/code\u003e\u003c/a\u003e annotation overhangs any surrounding text.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"auto\" | \"spaces\"", ebnf: "ruby-overhang =\n \"auto\" | \"spaces\"", valueType: "keyword", defaultValue: "spaces", related: [], provenance: "pure", truncated: false, trueCount: 2, shown: 2, assists: [], values: [ v("auto", "ruby-overhang: auto;"), v("spaces", "ruby-overhang: spaces;"), ], }, { number: 511, name: "ruby-position", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003eruby-position\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property defines the position of a ruby element relative to its base element. It can be positioned over the element (\u003ccode\u003eover\u003c/code\u003e), under it (\u003ccode\u003eunder\u003c/code\u003e), or between the characters on their right side (\u003ccode\u003einter-character\u003c/code\u003e).", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "( [ \"alternate\" ] , [ ( \"over\" | \"under\" ) ] ) | \"inter-character\"", ebnf: "ruby-position =\n ( [ \"alternate\" ] , [ ( \"over\" | \"under\" ) ] ) | \"inter-character\"", valueType: "keyword", defaultValue: "alternate under", related: [], provenance: "pure", truncated: false, trueCount: 6, shown: 6, assists: [], values: [ v("alternate over", "ruby-position: alternate over;"), v("alternate under", "ruby-position: alternate under;"), v("alternate", "ruby-position: alternate;"), v("over", "ruby-position: over;"), v("under", "ruby-position: under;"), v("inter-character", "ruby-position: inter-character;"), ], }, { number: 512, name: "speak-as", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003espeak-as\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property is used to define how \u003ca href=\"/en-US/docs/Web/HTML\"\u003eHTML\u003c/a\u003e content is spoken. The one to three enumerated key terms determine the manner by which elements and text get rendered by aural technologies, such as \u003ca href=\"/en-US/docs/Glossary/Screen_reader\"\u003escreen readers\u003c/a\u003e and digital assistants.", experimental: true, nonstandard: false, deprecated: false, warning: "", syntax: "\"normal\"\n | \"spell-out\" , [ \"digits\" , [ ( \"literal-punctuation\" | \"no-punctuation\" ) ] | ( \"literal-punctuation\" | \"no-punctuation\" ) , [ \"digits\" ] ]\n | \"digits\" , [ \"spell-out\" , [ ( \"literal-punctuation\" | \"no-punctuation\" ) ] | ( \"literal-punctuation\" | \"no-punctuation\" ) , [ \"spell-out\" ] ]\n | ( \"literal-punctuation\" | \"no-punctuation\" ) , [ \"spell-out\" , [ \"digits\" ] | \"digits\" , [ \"spell-out\" ] ]", ebnf: "speak-as =\n \"normal\"\n | \"spell-out\" , [ \"digits\" , [ ( \"literal-punctuation\" | \"no-punctuation\" ) ] | ( \"literal-punctuation\" | \"no-punctuation\" ) , [ \"digits\" ] ]\n | \"digits\" , [ \"spell-out\" , [ ( \"literal-punctuation\" | \"no-punctuation\" ) ] | ( \"literal-punctuation\" | \"no-punctuation\" ) , [ \"spell-out\" ] ]\n | ( \"literal-punctuation\" | \"no-punctuation\" ) , [ \"spell-out\" , [ \"digits\" ] | \"digits\" , [ \"spell-out\" ] ]", valueType: "keyword", defaultValue: "spell-out digits literal-punctuation", related: [], provenance: "pure", truncated: false, trueCount: 27, shown: 27, assists: [], values: [ v("normal", "speak-as: normal;"), v("spell-out digits literal-punctuation", "speak-as: spell-out digits literal-punctuation;"), v("spell-out digits no-punctuation", "speak-as: spell-out digits no-punctuation;"), v("spell-out digits", "speak-as: spell-out digits;"), v("spell-out literal-punctuation digits", "speak-as: spell-out literal-punctuation digits;"), v("spell-out literal-punctuation", "speak-as: spell-out literal-punctuation;"), v("spell-out no-punctuation digits", "speak-as: spell-out no-punctuation digits;"), v("spell-out no-punctuation", "speak-as: spell-out no-punctuation;"), v("spell-out", "speak-as: spell-out;"), v("digits spell-out literal-punctuation", "speak-as: digits spell-out literal-punctuation;"), v("digits spell-out no-punctuation", "speak-as: digits spell-out no-punctuation;"), v("digits spell-out", "speak-as: digits spell-out;"), v("digits literal-punctuation spell-out", "speak-as: digits literal-punctuation spell-out;"), v("digits literal-punctuation", "speak-as: digits literal-punctuation;"), v("digits no-punctuation spell-out", "speak-as: digits no-punctuation spell-out;"), v("digits no-punctuation", "speak-as: digits no-punctuation;"), v("digits", "speak-as: digits;"), v("literal-punctuation spell-out digits", "speak-as: literal-punctuation spell-out digits;"), v("literal-punctuation spell-out", "speak-as: literal-punctuation spell-out;"), v("literal-punctuation digits spell-out", "speak-as: literal-punctuation digits spell-out;"), v("literal-punctuation digits", "speak-as: literal-punctuation digits;"), v("literal-punctuation", "speak-as: literal-punctuation;"), v("no-punctuation spell-out digits", "speak-as: no-punctuation spell-out digits;"), v("no-punctuation spell-out", "speak-as: no-punctuation spell-out;"), v("no-punctuation digits spell-out", "speak-as: no-punctuation digits spell-out;"), v("no-punctuation digits", "speak-as: no-punctuation digits;"), v("no-punctuation", "speak-as: no-punctuation;"), ], }, { number: 513, name: "user-modify", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003euser-modify\u003c/code\u003e\u003c/strong\u003e property has no effect in Firefox. It was originally planned to determine whether or not the content of an element can be edited by a user.", experimental: false, nonstandard: true, deprecated: true, warning: "\u003cstrong\u003eWarning:\u003c/strong\u003e This property has been replaced by the \u003ca href=\"/en-US/docs/Web/HTML/Reference/Global_attributes/contenteditable\"\u003e\u003ccode\u003econtenteditable\u003c/code\u003e\u003c/a\u003e attribute.", syntax: "\"read-only\" | \"read-write\" | \"read-write-plaintext-only\" | \"write-only\"", ebnf: "user-modify =\n \"read-only\" | \"read-write\" | \"read-write-plaintext-only\" | \"write-only\"", valueType: "keyword", defaultValue: "read-write", related: [], provenance: "pure", truncated: false, trueCount: 4, shown: 4, assists: [], values: [ v("read-only", "user-modify: read-only;"), v("read-write", "user-modify: read-write;"), v("read-write-plaintext-only", "user-modify: read-write-plaintext-only;"), v("write-only", "user-modify: write-only;"), ], }, { number: 514, name: "vertical-align", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003evertical-align\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e shorthand property sets the vertical alignment of an inline, inline-block, or table-cell box.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "\"baseline\" | \"sub\" | \"super\" | \"text-top\" | \"text-bottom\" | \"middle\" | \"top\" | \"bottom\" | LengthPercentageType", ebnf: "vertical-align =\n \"baseline\" | \"sub\" | \"super\" | \"text-top\" | \"text-bottom\" | \"middle\" | \"top\" | \"bottom\" | LengthPercentageType", valueType: "keyword", defaultValue: "sub", related: [], provenance: "assisted", truncated: false, trueCount: 27, shown: 27, assists: [{ type: "\u003ccustom-ident\u003e", samples: ["my-ident", "tag-a"] }, { type: "\u003cdashed-ident\u003e", samples: ["--my-var"] }, { type: "\u003cdimension\u003e", samples: ["24px", "2em", "48px", "0.5rem"] }, { type: "\u003clength\u003e", samples: ["24px", "48px", "8px", "16px", "64px"] }, { type: "\u003cnumber\u003e", samples: ["1", "0.5", "2", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("baseline", "vertical-align: baseline;"), v("sub", "vertical-align: sub;"), v("super", "vertical-align: super;"), v("text-top", "vertical-align: text-top;"), v("text-bottom", "vertical-align: text-bottom;"), v("middle", "vertical-align: middle;"), v("top", "vertical-align: top;"), v("bottom", "vertical-align: bottom;"), v("24px", "vertical-align: 24px;"), v("48px", "vertical-align: 48px;"), v("8px", "vertical-align: 8px;"), v("16px", "vertical-align: 16px;"), v("64px", "vertical-align: 64px;"), v("50%", "vertical-align: 50%;"), v("80%", "vertical-align: 80%;"), v("30%", "vertical-align: 30%;"), v("65%", "vertical-align: 65%;"), v("15%", "vertical-align: 15%;"), v("100%", "vertical-align: 100%;"), v("calc(24px)", "vertical-align: calc(24px);"), v("clamp(24px, 2em, 48px)", "vertical-align: clamp(24px, 2em, 48px);"), v("min(24px)", "vertical-align: min(24px);"), v("max(24px)", "vertical-align: max(24px);"), v("round(nearest, 24px, 2em)", "vertical-align: round(nearest, 24px, 2em);"), v("abs(24px)", "vertical-align: abs(24px);"), v("var(--my-var, 48px)", "vertical-align: var(--my-var, 48px);"), v("env(my-ident, 48px)", "vertical-align: env(my-ident, 48px);"), ], }, { number: 515, name: "zoom", maturity: "modern", description: "The \u003cstrong\u003e\u003ccode\u003ezoom\u003c/code\u003e\u003c/strong\u003e \u003ca href=\"/en-US/docs/Web/CSS\"\u003eCSS\u003c/a\u003e property can be used to control the magnification level of an element. \u003ca href=\"/en-US/docs/Web/CSS/Reference/Values/transform-function/scale\"\u003e\u003ccode\u003etransform: scale()\u003c/code\u003e\u003c/a\u003e can be used as an alternative to this property.", experimental: false, nonstandard: false, deprecated: false, warning: "", syntax: "NonNegativeNumberType | PercentageType", ebnf: "zoom =\n NonNegativeNumberType | PercentageType", valueType: "keyword", defaultValue: "2", related: [], provenance: "assisted", truncated: false, trueCount: 11, shown: 11, assists: [{ type: "\u003cnumber [0,∞]\u003e", samples: ["1", "2", "0.5", "0.75", "0.25"] }, { type: "\u003cpercentage\u003e", samples: ["50%", "80%", "30%", "65%", "15%", "100%"] }], values: [ v("1", "zoom: 1;"), v("2", "zoom: 2;"), v("0.5", "zoom: 0.5;"), v("0.75", "zoom: 0.75;"), v("0.25", "zoom: 0.25;"), v("50%", "zoom: 50%;"), v("80%", "zoom: 80%;"), v("30%", "zoom: 30%;"), v("65%", "zoom: 65%;"), v("15%", "zoom: 15%;"), v("100%", "zoom: 100%;"), ], }, ], }, ]; window.CODEX = { total: 515, stats: { pureComplete: 173, pureTruncated: 6, assisted: 336, empty: 0 }, familyCount: families.filter((f) => f.group !== "galleries").length, galleryCount: families.filter((f) => f.group === "galleries").length, families, byId: Object.fromEntries(families.map((f) => [f.id, f])), }; })();