align-content For flexbox: stretch

flex-start

flex-end

center

space-between

space-around For grid layout: normal

baseline

first baseline

last baseline

space-between

space-around

space-evenly

stretch

center

start

end

center safe

center unsafe The safe and unsafe keywords are optional and can be used alongside any alignment keyword. Load Browser Support ▼ permalink MDN info W3C info

all This is a shorthand property that resets all CSS properties. Value can be one of the following: initial

inherit

unset

revert This property affects all properties and so does not have an initial value. Load Browser Support ▼ permalink MDN info W3C info

animation This is a shorthand property. Values represent: [animation‑name] [animation‑duration] [animation‑timing‑function] [animation‑delay] [animation‑iteration‑count] [animation‑direction] [animation‑fill‑mode] [animation‑play‑state] The first value parsed as a valid time value is used as "duration", so if you want to include a time value for "delay", you must first declare a duration. Multiple animations are declared using comma-separated value sets. Load Browser Support ▼ permalink MDN info W3C info

animation-direction normal

reverse

alternate-reverse

alternate Accepts a comma-separated list of direction values to correspond to the animations identified in animation-name and the matching @keyframes at-rules. Load Browser Support ▼ permalink MDN info W3C info

animation-fill-mode none

forwards

both

backwards Accepts a comma-separated list of fill mode values to correspond to the animations identified in animation-name and the matching <@keyframes> at-rules. Load Browser Support ▼ permalink MDN info W3C info

animation-name none

<custom identifier> Accepts a comma-separated list of animations and must correspond to a name given in any @keyframes at-rule. The "custom identifier" is chosen similar to how variable or function names are defined in JavaScript. This custom identifier must match an identifier used in an @keyframes at-rule. Load Browser Support ▼ permalink MDN info W3C info

animation-play-state running

paused Accepts a comma-separated list of play state values to correspond to the animations identified in animation-name and the matching @keyframes at-rules. Load Browser Support ▼ permalink MDN info W3C info

appearance none

auto

textfield

menulist-button

searchfield

textarea

push-button

slider-horizontal

checkbox

radio

square-button

menulist

listbox

meter

progress-bar

button This is normally defined using the vendor-specific -webkit-appearance . All values starting with searchfield exist for compatibility of content developed for earlier non-standard versions of this property. Load Browser Support ▼ permalink MDN info W3C info

background This is a shorthand property. Values represent: [background‑color] [background‑image] [background‑repeat] [background‑attachment] [background‑position] / [ background‑size] [background‑origin] [background‑clip] Multiple backgrounds are defined using comma-separated value sets. If a background color is included in the shorthand with multiple backgrounds, it must be declared last after a comma. If background-size is included, it's paired with background-position after a forward slash. If setting both background-origin and background-clip , the first value is background-origin . If one is omitted, both background-origin and background-clip are set to the same value. Load Browser Support ▼ permalink MDN info W3C info

background-position 0% 0%

top

bottom

left

right

center

right bottom

left top

center center

<percentage> <length> If multiple background images are defined, multiple background-position values are defined using comma-separated value pairs. Keywords represent horizontal offsets (left, center, right) and vertical offsets (top, center, bottom), and can be mixed and matched. Load Browser Support ▼ permalink MDN info W3C info

background-repeat repeat

no-repeat

space

round

repeat-y

repeat-x

repeat no-repeat

round round

space space Can be any two space-separated values, representing horizontal repeat and vertical repeat. If multiple background images are defined, multiple background-repeat values are defined using comma-separated value sets. Load Browser Support ▼ permalink MDN info W3C info

border-block-style This is a shorthand that accepts one or two space-separated values representing one of the following two value sets: [border‑top‑style] [border‑bottom‑style]

[border‑left‑style] [border‑right‑style] This property depends on writing mode, direction, and text-orientation. Load Browser Support ▼ permalink MDN info W3C info

border-block-width This is a shorthand that accepts one or two space-separated values representing one of the following two value sets: [border‑top‑width] [border‑bottom‑width]

[border‑left‑width] [border‑right‑width] Load Browser Support ▼ permalink MDN info W3C info

border-color This is a shorthand property that accepts one to four space-separated values. [border‑top‑color] [border‑right‑color] [border‑bottom‑color] [border‑left‑color] When one or more values are omitted, the existing values are applied to the missing ones. In other words, missing value #3 matches existing value #1 and missing value #4 matches existing value #2. Load Browser Support ▼ permalink MDN info W3C info

border-image-repeat Accepts one or two space-separated values. stretch

space

round

repeat

space round

stretch repeat Two values represent horizontal and vertical repeat. Values can be mixed and matched. Load Browser Support ▼ permalink MDN info W3C info

border-inline-style This is a shorthand that accepts one or two space-separated values representing one of the following two value sets: [border‑top‑style] [border‑bottom‑style]

[border‑left‑style] [border‑right‑style] Load Browser Support ▼ permalink MDN info W3C info

border-inline-width This is a shorthand that accepts one or two space-separated values representing one of the following two value sets: [border‑top‑width] [border‑bottom‑width]

[border‑left‑width] [border‑right‑width] Load Browser Support ▼ permalink MDN info W3C info

border-radius This is a shorthand property that accepts one to four space-separated values, followed optionally by another set of one to four space-separated values after a slash. 0

<percentage>

<length> <percentage> <length> <percentage>

<length> / <percentage> Value types can be mixed and matched. Values before the slash set the horizontal radii while values after the slash set the vertical radii. If one or more values are omitted in any value set before or after the slash, the existing values are applied to the missing ones. In other words, missing value #3 matches existing value #1 and missing value #4 matches existing value #2. Load Browser Support ▼ permalink MDN info W3C info

border-style This is a shorthand property that accepts one to four space-separated values. none

solid

ridge

outset

inset

hidden

groove

double

dotted

dashed When one or more values are omitted, the existing values are applied to the missing ones. In other words, missing value #3 matches existing value #1 and missing value #4 matches existing value #2. Load Browser Support ▼ permalink MDN info W3C info

break-after auto

avoid

always

all

avoid-page

page

left

right

recto

verso

avoid-column

column

avoid-region

region Browser support is for Paged Media. For further browser support details see MDN or caniuse.com. Load Browser Support ▼ permalink MDN info W3C info

break-before auto

avoid

always

all

avoid-page

page

left

right

recto

verso

avoid-column

column

avoid-region

region Browser support is for Paged Media. For further browser support details see MDN or caniuse.com. Load Browser Support ▼ permalink MDN info W3C info

cursor May accept a comma-separated list of cursors, beginning with one or more URLs and followed by a single keyword value as a fallback. Hover over the keyword values to see the cursors. auto

url("path/file.png")

url("path/file.png") <number> <number>

default

none

context-menu

help

pointer

progress

wait

cell

crosshair

text

vertical-text

alias

copy

move

no-drop

not-allowed

grab

grabbing

all-scroll

col-resize

row-resize

n-resize

s-resize

w-resize

ne-resize

nw-resize

se-resize

sw-resize

ew-resize

ns-resize

nesw-resize

nwse-resize

zoom-in

zoom-out A URL value can take optional x and y <number> coordinates (from 0 to 32). Load Browser Support ▼ permalink MDN info W3C info

display inline

block

inline-block

inline-table

run-in

flow

flow-root

table

flex

grid

ruby

list-item

table-row-group

table-header-group

table-footer-group

table-row

table-cell

table-column-group

table-column

table-caption

ruby-base

ruby-text

ruby-base-container

ruby-text-container

contents

none

inline-flex

inline-grid Now includes support for two space-separated values that define a display-inside value along with a display-outside value. See MDN and the spec for which values fall into these categories. Load Browser Support ▼ permalink MDN info W3C info

font This is a shorthand property that accepts two mandatory values and five optional values. It also accepts a single keyword value that represents a system font. [font‑style] [font‑variant] [font‑weight] [font‑stretch] [font‑size] / [line‑height] [font‑family]

caption

icon

menu

message-box

small-caption

status-bar For info on the order of values, mandatory values, etc., see this cheat sheet. Load Browser Support ▼ permalink MDN info W3C info

gap This is a shorthand property. Values represent: [row‑gap] [column‑gap] The legacy grid-gap property is now an alias for this property and has the same browser support. Load Browser Support ▼ permalink MDN info W3C info

grid-template-areas none

"a b b"

"a c d" The value must be one or more quoted <string>s, with each string representing a row and each "area" (separated by spaces in a line) representing a column. Load Browser Support ▼ permalink MDN info W3C info

justify-content For flexbox: flex-start

space-between

space-around

flex-end

center For grid layout: normal

space-between

space-around

space-evenly

stretch

center

center safe

center unsafe

left

right

baseline

first baseline

last baseline Part of Box Alignment Module. The safe and unsafe keywords are optional and can be used alongside any alignment keyword. Load Browser Support ▼ permalink MDN info W3C info

justify-items legacy

normal

stretch

left

right

center

legacy left

legacy right

legacy center

baseline

first baseline

last baseline

safe center

unsafe center

start

end

self-start

self-end

flex-start

flex-start The safe and unsafe keywords are optional and can be used alongside any alignment keyword. Load Browser Support ▼ permalink MDN info W3C info

justify-self auto

normal

stretch

left

right

center

baseline

first baseline

last baseline

safe center

unsafe center

start

end

self-start

self-end

flex-start

flex-start The safe and unsafe keywords are optional and can be used alongside any alignment keyword. Load Browser Support ▼ permalink MDN info W3C info

list-style-type disc

none

circle

square

decimal

<string>

symbols()

cjk-decimal

decimal-leading-zero

lower-roman

upper-roman

lower-greek

lower-alpha

lower-latin

upper-alpha

upper-latin

arabic-indic

armenian

bengali

cambodian

cjk-earthly-branch

cjk-heavenly-stem

cjk-ideographic

devanagari

ethiopic-numeric

georgian

gujarati

gurmukhi

hebrew

hiragana

hiragana-iroha

japanese-formal

japanese-informal

kannada

katakana

katakana-iroha

khmer

korean-hangul-formal

korean-hanja-formal

korean-hanja-informal

lao

lower-armenian

malayalam

mongolian

myanmar

oriya

persian

simp-chinese-formal

simp-chinese-informal

tamil

telugu

thai

tibetan

trad-chinese-formal

trad-chinese-informal

upper-armenian

disclosure-open

disclosure-closed

khmer

khmer

khmer Load Browser Support ▼ permalink MDN info W3C info

mask-mode Accepts one to four space separated values. match-source

alpha

luminance Accepts one or more comma-separated mask-mode layers (i.e. similar to layered multiple backgrounds). Load Browser Support ▼ permalink MDN info W3C info

mask-repeat repeat

no-repeat

space

round

repeat-y

repeat-x

repeat no-repeat

round round

space space Accepts one or more comma-separated mask-repeat layers (i.e. similar to layered multiple backgrounds). Load Browser Support ▼ permalink MDN info W3C info

resize none

both

horizontal

vertical New values: block

inline Requires the element's overflow property to be set to something other than visible , or else must be a replaced element. Load Browser Support ▼ permalink MDN info W3C info

scroll-snap-type none

x

y

block

inline

both

x mandatory

block proximity The mandatory and proximity keywords are optional and can follow any of the other keyword values. Load Browser Support ▼ permalink MDN info W3C info

text-decoration-line none

underline

overline

line-through

blink

underline overline

underline line-through blink

underline overline line-through blink

spelling-error

grammar-error The first four keywords can be mixed and matched up to four times. Load Browser Support ▼ permalink MDN info W3C info

text-emphasis-style none

filled

open

dot

circle

double-circle

triangle

sesame

filled circle

open sesame

<string> The filled and open keywords can be used alongside any of the other keywords. Load Browser Support ▼ permalink MDN info W3C info

text-rendering auto

optimizeSpeed

optimizeLegibility

geometricPrecision This is an SVG property that is also supported in many browsers on HTML elements. Load Browser Support ▼ permalink MDN info W3C info

text-spacing normal

none

auto

trim-start

space-start

space-first

trim-end

space-end

allow-end

trim-adjacent

space-adjacent

no-compress

ideograph-alpha

ideograph-numeric

punctuation

trim-start space-end trim-adjacent no-compress ideograph-numeric punctuation Multiple keywords can be mixed and matched, but with some restructions, as in the final line above. See the spec for details. Load Browser Support ▼ permalink MDN info W3C info

will-change auto

scroll-position

contents

transform

top, width The last two examples above can be any valid animatable CSS property or comma-separated list of properties Load Browser Support ▼ permalink MDN info W3C info

word-wrap normal

break-word Load Browser Support ▼ This is now an alias for overflow-wrap but has deeper browser support and doesn't accept the anywhere keyword value. permalink MDN info W3C info

The Help File Type a CSS property name into the box above. The page will automatically update as you type.

Add a space after the full property name to avoid multiple results for certain keywords (e.g. "width ").

Each property has a "Load Browser Support" button. The loaded CanIUse data represents basic support for the property itself and doesn't include each possible value or context (e.g. flex vs. grid context). No support data? That means there is no MDN article (feel free to create one!).

Try some of the pre-defined filters in the navigation above. All selected or typed filters will display the filtered properties in a menu on the right.

This app is now installable as a PWA!

The first value listed is the initial/default value for that property.

Values in angle brackets (e.g. <length> ) are linked to the spec, where it describes how they're written.

) are linked to the spec, where it describes how they're written. The generic keyword values inherit , initial , and unset are omitted to avoid repetition.

css2