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

align-self

stretch

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

N

N

all

See individual properties

inherit | initial | unset

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

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

backface-visibility

visible

visible | hidden

N

N

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

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

border

See individual properties

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

N

P

border-bottom

See individiual properties

[ <border-width> ‖ <border-style> ‖ <border-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-color

currentColor

<color>{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-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-left

See individiual properties

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

N

P

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-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

See individiual properties

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

N

P

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-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

See individiual properties

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

N

P

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-width

Not defined

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

N

Y

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

content

normal

normal | [ <string> | <uri> | <counter> | attr(<identifier>+)+ | open-quote | close-quote | no-open-quote | no-close-quote ]+

N

N

counter-increment

User agent specific

[<identifier> <integer>? ]+ | none

N

N

counter-reset

User agent specific

[<identifier> <integer>? ]+ | none

N

N

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

0 1 auto

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

N

N

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

float

none

left | right | none

N

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

font-family

User agent-specific

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

Y

N

font-feature-settings

normal

normal | <feature-tag-value>#

Y

N

font-kerning

auto | normal | none

auto

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 | [ weight ‖ style ]

Y

N

font-variant

normal

normal | none | [ <common-lig-values> ‖ <discretionary-lig-values> ‖ <historical-lig-values> ‖ <contextual-alt-values> ‖ stylistic(<feature-value-name>) ‖ historical-forms ‖ styleset(<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> ‖ ordinal ‖ slashed-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

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

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

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

list-style

<list-style-type> ‖ <list-style-image> ‖ <list-style-position>

See individual properties

Y

N

list-style-image

<uri> | <image> | none

none

N

N

list-style-position

inside | outside

outside

Y

N

list-style-type

disc

disc | circle | square | disclosure-open | disclosure-closed | decimal | decimal-leading-zero | arabic-indic | armenian | upper-armenian | lower-armenian | bengali | cambodian | khmer | cjk-decimal | devanagari | gujarati | gurmukhi | georgian | hebrew | kannada | lao | malayalam | mongolian | myanmar | oriya | persian | lower-roman | upper-roman | tamil | telugu | thai | tibetan | lower-alpha | lower-latin | upper-alpha | upper-latin | cjk-earthly-branch | cjk-heavenly-stem | lower-greek | hiragana | hiragana-iroha | katakana | katakana-iroha | japanese-informal | japanese-formal | korean-hangul-formal | korean-hanja-informal | korean-hanja-formal | simp-chinese-informal | simp-chinese-formal | trad-chinese-informal | trad-chinese-formal | ethiopic-numeric | <string> | none

Y

N

margin

Not defined

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

N

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

mask

See individual properties

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

N

P

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

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

opacity

<number>

1

N

Y

order

0

<integer>

N

Y

orphans

2

<integer>

N

N

outline

none

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

N

P

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

overflow-wrap ^c

normal

normal | break-word

Y

Y

overflow

visible

visible | hidden | scroll | auto

N

N

padding

Not defined

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

N

Y

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

page

auto

<identifier> | inherit

N

N

page-break-after

auto

auto | always

N

N

page-break-before

auto

auto | always

N

N

page-break-inside

auto

auto | avoid

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

quotes

[ <string> <string> ]+ | none

User agent specific

Y

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 | [ underline ‖ overline ‖ line-through ‖ blink ]

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

none

<transform-list> | none

N

Y

transform-origin

50% 50%

<position> ^e

N

Y

transform-style

flat

flat | preserve-3d

N

N

transition

all 0s ease 0s

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

N

N

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

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