Appendix B. Basic Property Reference

Note that in addition to the options shown in the “Value Syntax” column of this appendix, all properties listed also accept the following global values: inherit, initial, and unset. They may in the future accept revert as well. These global values are not shown in the table for brevity and clarity.

Where a “P” is indicated for whether an element is animatable (the “Anim.” column), that means some but not all aspects of the property’s value can be animated.

Property Default value Value syntax Inh. Anim.

align-content

stretch

flex-start | flex-end | center | space-between | space-around | stretch

N

N

align-items

stretch

flex-start | flex-end | center | baseline | stretch

N

N

animation-delay

0s

<time>#

N

N

animation-direction

normal

[ normal | reverse | alternate | alternate-reverse ]#

N

N

animation-duration

0s

<time>#

N

N

animation-fill-mode

none

[ none | forwards | backwards | both ]#

N

N

animation-iteration-count

1

<number> | infinite ]#

N

N

animation-name

none

[ <single-animation-name> | none ]#

N

N

animation-play-state

running

[ running | paused ]#

N

N

animation-timing-function

ease

[ ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>, start) | steps(<integer>, end) | cubic-bezier(<number>, <number>, <number>, <number>) ]#

N

N

animation

0s ease 0s 1 normal none running none

[ <animation-name><animation-duration><animation-timing-function><animation-delay><animation-iteration-count><animation-direction><animation-fill-mode><animation-play-state> ]#

N

N

backface-visibility

visible

visible | hidden

N

N

background-attachment

scroll

[ scroll | fixed | local ]#

N

N

background-blend-mode

normal

[ normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity]#

N

N

background-clip

border-box

[ border-box | padding-box | content-box | text ]#

N

N

background-color

transparent

<color>

N

Y

background-image

none

[ <image># | none

N

N

background-origin

padding-box

[ border-box | padding-box | content-box ]#

N

N

background-position

0% 0%

[ [ left | center | right | top | bottom | <percentage> | <length> ] | [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] | [ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ] ]#

N

Y

background-repeat

repeat

[ repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2} ]#

N

N

background-size

auto

[ <length> | <percentage> | auto ]{1,2} | cover | contain ]#

N

Y

background

See individual properties

[ <bg-image><position> [ / <bg-size> ]? ‖ <repeat-style><attachment><box><box> , ]* <bg-image><position> [ / <bg-size> ]? ‖ <repeat-style><attachment><box><box><background-color>

N

P

border-bottom-color

currentColor

<color>

N

Y

border-bottom-style

none

none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

N

N

border-bottom-width

medium

thin | medium | thick | <length>

N

Y

border-bottom

See individiual properties

[ <border-width><border-style><border-color> ]

N

P

border-color

currentColor

<color>{1,4}

N

Y

border-image-outset

0

[ <length> | <number> ]{1,4}

N

Y

border-image-repeat

stretch

[ stretch | repeat | round | space ]{1,2}

N

N

border-image-slice

100%

[ <number> | <percentage> ]{1,4} && fill?

N

Y

border-image-source

none

none | <image>

N

N

border-image-width

1

[ <length> | <percentage> | <number> | auto ]{1,4}

N

Y

border-image

See individual properties

<border-image-source><border-image-slice> [ / <border-image-width> | / <border-image-width>? / <border-image-outset> ]? ‖ <border-image-repeat>

N

N

border-left-color

currentColor

<color>

N

Y

border-left-style

none

none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

N

N

border-left-width

medium

thin | medium | thick | <length>

N

Y

border-left

See individiual properties

[ <border-width><border-style><border-color> ]

N

P

border-radius

0

[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

N

Y

border-bottom-left-radius

0

[ <length> | <percentage> ]{1,2}

N

Y

border-bottom-right-radius

0

[ <length> | <percentage> ]{1,2}

N

Y

border-top-left-radius

0

[ <length> | <percentage> ]{1,2}

N

Y

border-top-right-radius

0

[ <length> | <percentage> ]{1,2}

N

Y

border-right-color

currentColor

<color>

N

Y

border-right-style

none

none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

N

N

border-right-width

medium

thin | medium | thick | <length>

N

Y

border-right

See individiual properties

[ <border-width><border-style><border-color> ]

N

P

border-spacing

0

<length> <length>?

Y

Y

border-style

Not defined

[ none | hidden | solid | dotted | dashed | double | groove | ridge | inset | outset ]{1,4}

N

N

border-top-color

currentColor

<color>

N

Y

border-top-style

none

none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

N

N

border-top-width

medium

thin | medium | thick | <length>

N

Y

border-top

See individiual properties

[ <border-width><border-style><border-color> ]

N

P

border-width

Not defined

[ thin | medium | thick | <length> ]{1,4}

N

Y

border

See individual properties

[ <border-width><border-style><border-color> ]

N

P

bottom

auto

<length> | <percentage> | auto

N

Y

box-decoration-break

slice

slice | clone

N

N

box-shadow

none

none | inset? && <length>{2,4} && <color>?

N

Y

box-sizing

content-box

content-box | padding-box | border-box

N

N

caption-side

top

top | bottom

Y

N

clear

none

left | right | both | none

N

N

clip-path

none

none | <url> | [ [ inset() | circle() | ellipse() | polygon() ] ‖ [ border-box | padding-box | content-box | margin-box | fill-box | stroke-box | view-box ] ]

N

P

clip-rule

nonzero

nonzero | evenodd

N

N

color

User agent specific

<color>

Y

Y

direction

ltr

ltr | rtl

Y

Y

display

inline

[ <display-outside><display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>

N

N

empty-cells

show

show | hide

Y

N

filter

none

[ none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | sepia() | saturate() | url() ]#

N

Y

flex-basis

auto

content | [ <length> | <percentage> ]

N

P

flex-direction

row

row | row-reverse | column | column-reverse

N

N

flex-flow

row nowrap

<flex-direction><flex-wrap>

N

N

flex-grow

0

<number>

N

Y

flex-shrink

1

<number>

N

Y

flex-wrap

nowrap

nowrap | wrap | wrap-reverse

N

N

flex

0 1 auto

<flex-grow> <flex-shrink>?<flex-basis> ] | none | auto

N

N

float

none

left | right | none

N

N

font-family

User agent-specific

[ <family-name> | <generic-family> ]#

Y

N

font-feature-settings

normal

normal | <feature-tag-value>#

Y

N

font-size-adjust

none

<number> | none | auto

Y

Y

font-size

medium

xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | <length> | <percentage>

Y

P

font-stretch

normal

normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

Y

N

font-style

normal

italic | oblique | normal

Y

N

font-synthesis

weight style

none | weightstyle

Y

N

font-variant

normal

normal | none | [ <common-lig-values><discretionary-lig-values><historical-lig-values><contextual-alt-values>stylistic(<feature-value-name>)historical-formsstyleset(<feature-value-name>#)character-variant(<feature-value-name>#)swash(<feature-value-name>)ornaments(<feature-value-name>)annotation(<feature-value-name>) ‖ [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] ‖ <numeric-figure-values><numeric-spacing-values><numeric-fraction-values>ordinalslashed-zero<east-asian-variant-values><east-asian-width-values>ruby ]

Y

N

font-weight

normal

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Y

N

font

See individual properties

[[ <font-style> ‖ [ normal | small-caps ] ‖ <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>] | caption | icon | menu | message-box | small-caption | status-bar

Y

P

grid-area

See individual properties

<grid-line> [ / <grid-line> ]{0,3}

N

N

grid-auto-columns

auto

<track-breadth> | minmax( <track-breadth> , <track-breadth> )

N

N

grid-auto-flow

row

[ row | column ] ‖ dense

N

N

grid-auto-rows

auto

<track-breadth> | minmax( <track-breadth> , <track-breadth> )

N

N

grid-column-end

auto

auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer><custom-ident> ]]

N

N

grid-column-gap

0

<length> | <percentage>

N

Y

grid-column-start

auto

auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer><custom-ident> ]]

N

N

grid-column

auto

<grid-line> [ / <grid-line> ]?

N

N

grid-gap

0 0

<grid-row-gap> <grid-column-gap>

N

Y

grid-row-end

auto

auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer><custom-ident> ]]

N

N

grid-row-gap

0

<length>_ | <percentage>

N

Y

grid-row-start

auto

auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer><custom-ident> ]]

N

N

grid-row

auto

<grid-line> [ / <grid-line> ]?

N

N

grid-template-areas

none

none | <string>

N

N

grid-template-columns

none

none | <track-list> | <auto-track-list>

N

N

grid-template-rows

none

none | <track-list> | <auto-track-list>

N

N

grid

See individual properties

none | subgrid | [ <grid-template-rows> / <grid-template-columns> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <track-list> ]? | [ <grid-auto-flow> [ <grid-auto-rows> [ / <grid-auto-columns> ]? ]? ] ]

N

N

height

auto

<length> | <percentage> | auto

N

Y

hyphens

manual

manual | auto | none

Y

N

isolation

auto

auto | isolate

N

N

justify-content

flex-start

flex-start | flex-end | center | space-between | space-around

N

N

left

auto

<length> | <percentage> | auto

N

Y

letter-spacing

normal

<length> | normal

Y

Y

line-break

auto

auto | loose | normal | strict

Y

Y

line-height

normal

<number> | <length> | <percentage> | normal

Y

Y

margin-bottom

0

<length> | <percentage> | auto

N

Y

margin-left

0

<length> | <percentage> | auto

N

Y

margin-right

0

<length> | <percentage> | auto

N

Y

margin-top

0

<length> | <percentage> | auto

N

Y

margin

Not defined

[ <length> | <percentage> | auto ]{1,4}

N

Y

mask-clip

border-box

[ content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box | no-clip ]#

N

N

mask-composite

add

[ add | subtract | intersect | exclude ]#

N

N

mask-image

none

[ none | <image> | <mask-source> ]#

N

N

mask-mode

match-source

[ alpha | luminance | match-source ]#

N

N

mask-origin

mask-origin

[ content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box ]#

N

N

mask-position

0% 0%

<position># a

N

P

mask-repeat

repeat

[ repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} ]#

N

Y

mask-size

auto

[ [ <length> | <percentage> | auto ]{1,2} | cover | contain ]#

N

P

mask-type

luminance

luminance | alpha

N

N

mask

See individual properties

[ <mask-image><mask-position> [ / <mask-size> ]? ‖ <mask-repeat><mask-clip><mask-origin><mask-composite><mask-mode> ]#

N

P

max-height

none

<length> | <percentage> | none

N

Y

max-width

none

<length> | <percentage> | none

N

Y

min-height

0

<length> | <percentage>

N

Y

min-width

0

<length> | <percentage>

N

Y

mix-blend-mode

normal

normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

N

N

object-fit

fill

fill | contain | cover | scale-down | none

N

N

object-position

50% 50%

<position> b

N

N

order

0

<integer>

N

Y

orphans

2

<integer>

N

N

outline-color

invert

<color> | invert

N

Y

outline-style

none

auto | none | solid | dotted | dashed | double | groove | ridge | inset | outset

N

N

outline-width

medium

<length> | thin | medium | thick

N

Y

outline

none

[ <outline-color><outline-style><outline-width> ]

N

P

overflow-wrap c

normal

normal | break-word

Y

Y

overflow

visible

visible | hidden | scroll | auto

N

N

padding-bottom

0

<length> | <percentage>

N

Y

padding-left

0

<length> | <percentage>

N

Y

padding-right

0

<length> | <percentage>

N

Y

padding-top

0

<length> | <percentage>

N

Y

padding

Not defined

[ <length> | <percentage> ]{1,4}

N

Y

page-break-after

auto

auto | always

N

N

page-break-before

auto

auto | always

N

N

page-break-inside

auto

auto | avoid

N

N

page

auto

<identifier> | inherit

N

N

perspective-origin

50% 50%

<position> d

N

Y

perspective

none

none | <length>

N

Y

position

static

static | relative | sticky | absolute | fixed

N

N

right

auto

<length> | <percentage> | auto

N

Y

shape-image-threshold

0.0

<number>

N

Y

shape-margin

0

<length> | <percentage>

N

Y

shape-outside

none

none | [ <basic-shape><shape-box> ] |

N

P

size

auto

auto | <length>{1,2} | [ <page-size> || [ portrait | landscape ] ]

N

N

tab-size

8

<length> | <integer>

Y

Y

table-layout

auto

auto | fixed

Y

N

text-align-last

auto

auto | start | end | left | right | center | justify

Y

N

text-align

start

start | end | left | right | center | justify | match-parent | start end

Y

N

text-decoration

none

none | [ underlineoverlineline-throughblink ]

N

N

text-indent

0

<length> | <percentage>

Y

Y

text-orientation

mixed

mixed | upright | sideways

Y

Y

text-rendering

auto

auto | optimizeSpeed | optimizeLegibility | geometricPrecision

Y

Y

text-shadow

none

none | [ <length> ‖ [ <length> <length> <length>? ] ]#

N

Y

text-transform

none

uppercase | lowercase | capitalize | none

Y

N

top

auto

<length> | <percentage> | auto

N

Y

transform-origin

50% 50%

<position> e

N

Y

transform-style

flat

flat | preserve-3d

N

N

transform

none

<transform-list> | none

N

Y

transition-delay

0s

<time>#

N

N

transition-duration

0s

<time>#

N

N

transition-property

all

none | [ all | <property-name> ]#

N

N

transition-timing-function

ease

<timing-function># f

N

N

transition

all 0s ease 0s

[ [ none | <transition-property> ] ‖ <time><transition-timing-function><time> ]#

N

N

unicode-bidi

normal

normal | embed | bidi-override

N

Y

vertical-align

baseline

baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <percentage>

N

P

visibility

visible

visible | hidden | collapse

Y

N

white-space

normal

normal | nowrap | pre | pre-wrap | pre-line

N

N

widows

2

<integer>

N

N

width

auto

<length> | <percentage> | auto

N

Y

word-break

normal

normal | break-all | keep-all

Y

Y

word-spacing

normal

<length> | normal

Y

Y

writing-mode

horizontal-tb

horizontal-tb | vertical-rl | vertical-lr

Y

Y

z-index

auto

<integer> | auto

N

Y

a See background-position for a detailed expansion of the <position> syntax.

b See background-position for a detailed expansion of the <position> syntax.

c This property used to be called word-wrap.

d See background-position for a detailed expansion of the <position> syntax.

e See background-position for a detailed expansion of the <position> syntax.

f See animation-timing-function for a detailed expansion of the <timing-function> syntax.