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

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

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

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

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.

Comments are closed.