Style Property Quick Reference
Every style property with its value syntax, initial value, what it applies to, whether it is inherited and whether it affects paint or geometry, grouped by the chapter that defines it. The entry gives the full semantics and examples.
Style Properties
Section titled “Style Properties”| Property | Value | Initial | Applies to | Inherited | Impact |
|---|---|---|---|---|---|
:color |
A color string or currentColor |
nil |
Every node | Yes | Paint |
:font-family |
A non-empty string or a symbol | nil |
Every node | Yes | Paint and geometry |
:font-size |
A positive number | nil |
Every node | Yes | Paint and geometry |
:font-weight |
normal, bold, bolder, lighter or 100–900 |
normal |
Every node | Yes | Paint and geometry |
:font-style |
normal, italic or oblique |
normal |
Every node | Yes | Paint and geometry |
:text-decoration-line |
none or a list of underline, overline and line-through |
none |
Every node | No | Paint |
:text-decoration-color |
A color string or currentColor |
currentColor |
Every node | No | Paint |
:text-decoration-style |
solid, double, dotted, dashed or wavy |
solid |
Every node | No | Paint |
:box-sizing |
border-box or content-box; any other value behaves as border-box |
border-box |
Every non-text node |
No | Geometry |
:width |
auto, stretch, min-content, max-content, fit-content or an inline-axis length |
auto |
Every non-text node |
No | Geometry |
:min-width |
The :width keywords or an inline-axis length |
auto |
Every non-text node |
No | Geometry |
:max-width |
none or the :width keywords or an inline-axis length |
none |
Every non-text node |
No | Geometry |
:height |
auto, stretch, min-content, max-content, fit-content or a block-axis length |
auto |
Every non-text node |
No | Geometry |
:min-height |
The :height keywords or a block-axis length |
auto |
Every non-text node |
No | Geometry |
:max-height |
none or the :height keywords or a block-axis length |
none |
Every non-text node |
No | Geometry |
:padding |
One to four side lengths, or a plist with the :top, :right, :bottom and :left keys |
— | Every non-text node |
No | Paint and geometry |
:padding-inline |
One or two inline-axis lengths | — | Every non-text node |
No | Paint and geometry |
:padding-block |
One or two block-axis lengths | — | Every non-text node |
No | Paint and geometry |
:padding-top |
A non-negative block-axis length | (lh 0) |
Every non-text node |
No | Paint and geometry |
:padding-right |
A non-negative inline-axis length | (px 0) |
Every non-text node |
No | Paint and geometry |
:padding-bottom |
A non-negative block-axis length | (lh 0) |
Every non-text node |
No | Paint and geometry |
:padding-left |
A non-negative inline-axis length | (px 0) |
Every non-text node |
No | Paint and geometry |
:padding-block-start |
A non-negative block-axis length | (lh 0) |
Every non-text node |
No | Paint and geometry |
:padding-inline-end |
A non-negative inline-axis length | (px 0) |
Every non-text node |
No | Paint and geometry |
:padding-block-end |
A non-negative block-axis length | (lh 0) |
Every non-text node |
No | Paint and geometry |
:padding-inline-start |
A non-negative inline-axis length | (px 0) |
Every non-text node |
No | Paint and geometry |
:margin |
One to four side lengths, or a plist with the :top, :right, :bottom and :left keys |
— | Every non-text node |
No | Geometry |
:margin-inline |
One or two inline-axis lengths | — | Every non-text node |
No | Geometry |
:margin-block |
One or two block-axis lengths | — | Every non-text node |
No | Geometry |
:margin-top |
A non-negative block-axis length | (lh 0) |
Every non-text node |
No | Geometry |
:margin-right |
A non-negative inline-axis length | (px 0) |
Every non-text node |
No | Geometry |
:margin-bottom |
A non-negative block-axis length | (lh 0) |
Every non-text node |
No | Geometry |
:margin-left |
A non-negative inline-axis length | (px 0) |
Every non-text node |
No | Geometry |
:margin-block-start |
A non-negative block-axis length | (lh 0) |
Every non-text node |
No | Geometry |
:margin-inline-end |
A non-negative inline-axis length | (px 0) |
Every non-text node |
No | Geometry |
:margin-block-end |
A non-negative block-axis length | (lh 0) |
Every non-text node |
No | Geometry |
:margin-inline-start |
A non-negative inline-axis length | (px 0) |
Every non-text node |
No | Geometry |
:border |
A width, style and color in any order, or one value | — | Every non-text node |
No | Paint and geometry |
:border-top |
A width, style and color in any order, or one value | — | Every non-text node |
No | Paint and geometry |
:border-right |
A width, style and color in any order, or one value | — | Every non-text node |
No | Paint and geometry |
:border-bottom |
A width, style and color in any order, or one value | — | Every non-text node |
No | Paint and geometry |
:border-left |
A width, style and color in any order, or one value | — | Every non-text node |
No | Paint and geometry |
:border-width |
One to four non-negative stroke lengths | — | Every non-text node |
No | Paint and geometry |
:border-style |
One to four of none and solid |
— | Every non-text node |
No | Paint and geometry |
:border-color |
One to four color strings or currentColor |
— | Every non-text node |
No | Paint |
:border-top-p |
t or nil |
— | Every non-text node |
No | Paint and geometry |
:border-top-width |
A non-negative stroke length | (px 0) |
Every non-text node |
No | Paint and geometry |
:border-right-width |
A non-negative stroke length | (px 0) |
Every non-text node |
No | Paint and geometry |
:border-bottom-width |
A non-negative stroke length | (px 0) |
Every non-text node |
No | Paint and geometry |
:border-left-width |
A non-negative stroke length | (px 0) |
Every non-text node |
No | Paint and geometry |
:border-top-style |
none or solid |
none |
Every non-text node |
No | Paint and geometry |
:border-right-style |
none or solid |
none |
Every non-text node |
No | Paint and geometry |
:border-bottom-style |
none or solid |
none |
Every non-text node |
No | Paint and geometry |
:border-left-style |
none or solid |
none |
Every non-text node |
No | Paint and geometry |
:border-top-color |
A color string or currentColor |
currentColor |
Every non-text node |
No | Paint |
:border-right-color |
A color string or currentColor |
currentColor |
Every non-text node |
No | Paint |
:border-bottom-color |
A color string or currentColor |
currentColor |
Every non-text node |
No | Paint |
:border-left-color |
A color string or currentColor |
currentColor |
Every non-text node |
No | Paint |
:border-radius |
A non-negative inline-axis length | (px 0) |
Every non-text node |
No | Paint |
:background-color |
A color string | nil |
Every node | No | Paint |
:backdrop-filter |
nil or (brightness AMOUNT) |
nil |
Every non-text node |
No | Paint |
:visibility |
visible or hidden |
visible |
Every non-text node |
No | Paint |
:item-gap |
A non-negative main-axis length | (px 0) |
row and column |
No | Geometry |
:cross-align |
start, center, end or stretch |
stretch |
row and column |
No | Geometry |
:flex-direction |
row, row-reverse, column or column-reverse |
row |
flex |
No | Geometry |
:flex-wrap |
nowrap, wrap or wrap-reverse |
nowrap |
flex |
No | Geometry |
:flex-flow |
One direction and one wrapping keyword in any order | — | flex |
No | Geometry |
:justify-content |
normal, start, end, flex-start, flex-end, center, stretch, space-between, space-around or space-evenly |
flex-start |
flex and grid |
No | Geometry |
:align-items |
normal, start, end, stretch, flex-start, flex-end, center or baseline |
stretch |
flex and grid |
No | Geometry |
:align-content |
normal, start, end, stretch, flex-start, flex-end, center, space-between, space-around or space-evenly |
stretch |
flex and grid |
No | Geometry |
:row-gap |
A non-negative block-axis length | (lh 0) |
flex and grid |
No | Geometry |
:column-gap |
A non-negative inline-axis length | (px 0) |
flex and grid |
No | Geometry |
:gap |
One or two non-negative lengths | — | flex and grid |
No | Geometry |
:order |
An integer | 0 |
Every non-text node |
No | Geometry |
:flex-grow |
A non-negative number | 0 |
Every non-text node |
No | Geometry |
:flex-shrink |
A non-negative number | 1 |
Every non-text node |
No | Geometry |
:flex-basis |
auto, min-content, max-content, fit-content, stretch or a non-negative length |
auto |
Every non-text node |
No | Geometry |
:align-self |
auto, normal, start, end, stretch, flex-start, flex-end, center or baseline |
auto |
Every non-text node |
No | Geometry |
:flex |
A non-negative number, none, auto, initial, or (grow shrink basis) |
— | Every non-text node |
No | Geometry |
:grid-template-columns |
nil or a list of column tracks |
nil |
grid |
No | Geometry |
:grid-template-rows |
nil or a list of row tracks |
nil |
grid |
No | Geometry |
:grid-auto-columns |
auto, a single track, or a one-element list of one track |
auto |
grid |
No | Geometry |
:grid-auto-rows |
auto, a single track, or a one-element list of one track |
auto |
grid |
No | Geometry |
:grid-auto-flow |
row or column |
row |
grid |
No | Structure |
:grid-column |
nil, auto, a positive integer, (N), (START :span SPAN), (:span SPAN) or (START END) |
auto |
Every non-text node |
No | Geometry |
:grid-row |
nil, auto, a positive integer, (N), (START :span SPAN), (:span SPAN) or (START END) |
auto |
Every non-text node |
No | Geometry |
:grid-column-span |
A positive integer | — | Every non-text node |
No | Geometry |
:grid-row-span |
A positive integer | — | Every non-text node |
No | Geometry |
:justify-items |
stretch, start, end or center |
stretch |
grid |
No | Geometry |
:justify-self |
auto, stretch, start, end or center |
auto |
Every non-text node |
No | Geometry |
:position |
static, relative or absolute |
static |
Every non-text node |
No | Geometry |
:left |
A signed inline-axis length | (px 0) |
Every non-text node |
No | Geometry |
:top |
A signed block-axis length | (lh 0) |
Every non-text node |
No | Geometry |
:z-index |
An integer | 0 |
Every non-text node |
No | Paint |
:layer |
local or root |
local |
Every non-text node |
No | Geometry |
:anchor |
nil, a symbol or a string |
nil |
Every non-text node |
No | Geometry |
:placement |
bottom-start, bottom-end, top-start or top-end |
bottom-start |
Every non-text node |
No | Geometry |
:text-align |
left, center, right; end behaves as right and any other value as left |
left |
box only |
Yes | Geometry |
:wrap-mode |
word, char, kp or none |
word |
Every non-text node |
Yes | Geometry |
:overflow |
visible, hidden, scroll or auto |
scroll |
Every non-text node |
No | Paint and geometry |
:scroll-anchor |
start or end |
start |
Every non-text node |
No | Geometry |
:outer |
inline or block |
block |
Every non-text node |
No | Structure and geometry |