CSS Values

accent-color

  • auto
  • currentColor
  • transparent
  • >color>

Only applies to certain form and/or UI elements.

Load Browser Support ▼

permalink MDN info W3C info

css3

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

css3 flexbox grid

align-items

  • normal
  • center
  • flex-start
  • flex-end
  • start
  • end
  • self-start
  • self-end
  • baseline
  • first baseline
  • last baseline
  • stretch
  • safe
  • unsafe

Load Browser Support ▼

permalink MDN info W3C info

css3 flexbox grid

align-self

  • auto
  • normal
  • self-start
  • self-end
  • flex-start
  • flex-end
  • center
  • baseline
  • first baseline
  • last baseline
  • stretch
  • safe
  • unsafe

Load Browser Support ▼

permalink MDN info W3C info

css3 grids flexbox

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

css3

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

css3 keyframes

animation-delay

Accepts a comma-separated list of delay values to correspond to the animations identified in animation-name and the matching @keyframes at-rules.

Load Browser Support ▼

permalink MDN info W3C info

css3 keyframes

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

css3 keyframes

animation-duration

Accepts a comma-separated list of time values to correspond to the animations identified in animation-name and the matching @keyframes at-rules.

Load Browser Support ▼

permalink MDN info W3C info

css3 keyframes

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

css3 keyframes

animation-iteration-count

Accepts a comma-separated list of iteration counts to correspond to the animations identified in animation-name and the matching @keyframes at-rules.

Load Browser Support ▼

permalink MDN info W3C info

css3 keyframes

animation-name

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

css3 keyframes

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

css3 keyframes

animation-timing-function

Accepts a comma-separated list of timing functions to correspond to the animations identified in animation-name and the matching @keyframes at-rules. First and third values in the cubic-bezier() function must be a number between 0 and 1.

Load Browser Support ▼

permalink MDN info W3C info

css3 keyframes

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

css3 -webkit-appearance webkit-appearance

aspect-ratio

Load Browser Support ▼

permalink MDN info W3C info

css3

backface-visibility

  • visible
  • hidden

Load Browser Support ▼

permalink MDN info W3C info

css3 3d

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

css2 multiple multiple-bg

background-attachment

  • scroll
  • fixed
  • local

If multiple background images are defined, multiple background-attachment values are declared by comma-separating the values.

Load Browser Support ▼

permalink MDN info W3C info

css2

background-blend-mode

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

Load Browser Support ▼

permalink MDN info W3C info

css3 compositing

background-clip

  • border-box
  • padding-box
  • content-box
  • text

If multiple background images are defined, multiple background-clip values are declared by comma-separating the values.

Load Browser Support ▼

permalink MDN info W3C info

css3

background-color

Load Browser Support ▼

permalink MDN info W3C info

css2

background-image

Multiple background images are defined using comma-separated values. URLs can be defined without quotes or with single quotes.

Load Browser Support ▼

permalink MDN info W3C info

css2 linear-gradient radial-gradient conic-gradient repeating-gradient multiple-bg

background-origin

  • padding-box
  • border-box
  • content-box

This property has no effect on background images that have their background-attachment property set to "fixed".

Load Browser Support ▼

permalink MDN info W3C info

css3

background-position

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

css2

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

css2

background-size

If two values are included, the first value is the width and the second is the height. If multiple background images are defined, multiple background-size values are defined using comma-separated value sets.

Load Browser Support ▼

permalink MDN info W3C info

css3

block-size

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

border

This is a shorthand property. Values represent:

  • [border‑width] [border‑style] [border‑color]

This shorthand property will reset border-image values to their initial values.

Load Browser Support ▼

permalink MDN info W3C info

css2

border-block

This is a shorthand property that accepts one to three space-separated values.

  • [border‑block‑width] [border‑block‑style] [border‑block‑color]

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

border-block-color

This is a shorthand that accepts one or two space-separated values representing:

  • <border-block-start-color> <border-block-end-color>

This property depends on writing mode, direction, and text-orientation.

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

border-block-end

This is a shorthand property that accepts one to three space-separated values.

  • [border‑block‑end‑width] [border‑block‑end‑style] [border‑block‑end‑color]

This property depends on writing mode, direction, and text-orientation.

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

border-block-end-color

This property depends on writing mode, direction, and text-orientation.

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

border-block-end-style

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

This property depends on writing mode, direction, and text-orientation.

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

border-block-end-width

This property depends on writing mode, direction, and text-orientation.

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

border-block-start

This is a shorthand property that accepts one to three space-separated values.

  • [border‑block‑end‑width] [border‑block‑end‑style] [border‑block‑end‑color]

This property depends on writing mode, direction, and text-orientation.

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

border-block-start-color

This property depends on writing mode, direction, and text-orientation.

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

border-block-start-style

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

This property depends on writing mode, direction, and text-orientation.

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

border-block-start-width

This property depends on writing mode, direction, and text-orientation.

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

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

css3 logical

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

css3 logical

border-bottom

This is a shorthand property. Values represent:

  • [border‑bottom‑width] [border‑bottom‑style] [border‑bottom‑color]

Load Browser Support ▼

permalink MDN info W3C info

css2

border-bottom-color

Load Browser Support ▼

permalink MDN info W3C info

css2

border-bottom-left-radius

Load Browser Support ▼

permalink MDN info W3C info

css3

border-bottom-right-radius

Load Browser Support ▼

permalink MDN info W3C info

css3

border-bottom-style

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

Load Browser Support ▼

permalink MDN info W3C info

css2

border-bottom-width

Load Browser Support ▼

permalink MDN info W3C info

css2

border-collapse

  • separate
  • collapse

Load Browser Support ▼

permalink MDN info W3C info

css2 tables

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

css2

border-end-end-radius

This property accepts one or two space-separated values and depends on writing mode, direction, and text-orientation.

Value types can be mixed and matched.

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

border-end-start-radius

This property accepts one or two space-separated values and depends on writing mode, direction, and text-orientation.

Value types can be mixed and matched.

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

border-image

This is a shorthand property. Values represent:

  • [border‑image‑source] [border‑image‑slice] / [border‑image‑width] / [border‑image‑outset] [border‑image‑repeat]

Load Browser Support ▼

permalink MDN info W3C info

css3

border-image-outset

This property accepts one to four space-separated values.

Load Browser Support ▼

permalink MDN info W3C info

css3

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

css3

border-image-slice

Accepts one to four space-separated values.

The fill keyword cannot be used on its own, it must precede or follow a length or percentage value.

Load Browser Support ▼

permalink MDN info W3C info

css3

border-image-source

URLs can be defined without quotes or with single quotes.

Load Browser Support ▼

permalink MDN info W3C info

css3

border-image-width

Accepts one to four space-separated values.

Value types can be mixed and matched.

Load Browser Support ▼

permalink MDN info W3C info

css3

border-inline

This is a shorthand property that accepts one to three space-separated values.

  • [border‑inline‑width] [border‑inline‑style] [border‑inline‑color]

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

border-inline-color

This is a shorthand that accepts one or two space-separated values representing:

  • [border‑inline‑start‑color] [border‑inline‑end‑color]

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

border-inline-end

This is a shorthand property that accepts one to three space-separated values.

  • [border‑inline‑end‑width] [border‑inline‑end‑style] [border‑inline‑end‑color]

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

border-inline-end-color

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

border-inline-end-style

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

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

border-inline-end-width

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

border-inline-start

This is a shorthand property that accepts one to three space-separated values.

  • [border‑inline‑end‑width] [border‑inline‑end‑style] [border‑inline‑end‑color]

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

border-inline-start-color

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

border-inline-start-style

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

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

border-inline-start-width

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

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

css3 logical

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

css3 logical

border-left

This is a shorthand property that accepts one to three space-separated values representing:

  • [border‑width] [border‑style] [border‑color]

Load Browser Support ▼

permalink MDN info W3C info

css2

border-left-color

Load Browser Support ▼

permalink MDN info W3C info

css2

border-left-style

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

Load Browser Support ▼

permalink MDN info W3C info

css2

border-left-width

Load Browser Support ▼

permalink MDN info W3C info

css2

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.

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

css3

border-right

This is a shorthand property that accepts one to three space-separated values representing:

  • [border‑right‑width] [border‑right‑style] [border‑right‑color]

Load Browser Support ▼

permalink MDN info W3C info

css2
css2

border-right-color

Load Browser Support ▼

permalink MDN info W3C info

css2

border-right-style

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

Load Browser Support ▼

permalink MDN info W3C info

css2

border-right-width

Load Browser Support ▼

permalink MDN info W3C info

css2

border-spacing

Accepts one or two space-separated values.

Applies to table cells. If two values are declared, the first value is the horizontal spacing and second is vertical.

Load Browser Support ▼

permalink MDN info W3C info

css2 tables

border-start-end-radius

Accepts one or two space-separated values and depends on writing mode, direction, and text-orientation.

Value types can be mixed and matched.

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

border-start-start-radius

Accepts one or two space-separated values and depends on writing mode, direction, and text-orientation.

Value types can be mixed and matched.

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

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

css2

border-top

This is a shorthand property that accepts one to three space-separated values representing:

  • [border‑top‑width] [border‑top‑style] [border‑top‑color]

Load Browser Support ▼

permalink MDN info W3C info

css2

border-top-color

Load Browser Support ▼

permalink MDN info W3C info

css2

border-top-left-radius

Load Browser Support ▼

permalink MDN info W3C info

css3

border-top-right-radius

Load Browser Support ▼

permalink MDN info W3C info

css3

border-top-style

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

Load Browser Support ▼

permalink MDN info W3C info

css2

border-top-width

Load Browser Support ▼

permalink MDN info W3C info

css2

border-width

This is a shorthand property that accepts one to four space-separated values representing:

  • [border‑top‑width] [border‑right‑width] [border‑bottom‑width] [border‑left‑width]

Load Browser Support ▼

permalink MDN info W3C info

css2

bottom

Applies to positioned elements.

Load Browser Support ▼

permalink MDN info W3C info

css2 positioning

box-decoration-break

  • slice
  • clone

Load Browser Support ▼

permalink MDN info W3C info

css3 paged

box-shadow

  • none
  • [h‑offset] [v‑offset] [blur] [spread] <color> inset

The "inset" keyword is optional. The values in square brackets are expressed as <length> values. Multiple shadows are defined by comma-separating value sets.

Load Browser Support ▼

permalink MDN info W3C info

css3

box-sizing

  • content-box
  • border-box

Firefox up to version 50 is the only browser that supports the padding-box value, which is now deprecated.

Load Browser Support ▼

permalink MDN info W3C info

css3

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

css3 paged column multi-column region fragmentation columns

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

css3 paged column multi-column region fragmentation columns

break-inside

  • auto
  • avoid
  • avoid-page
  • avoid-column
  • avoid-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

css3 paged column multi-column region fragmentation columns

caption-side

  • top
  • bottom
  • inline-start
  • inline-end

Applies to <caption> elements on HTML tables. Previous versions of Firefox supported a number of additional non-standard values.

Load Browser Support ▼

permalink MDN info W3C info

css2 tables

caret-color

Load Browser Support ▼

permalink MDN info W3C info

css3

clear

  • none
  • left
  • right
  • both
  • inline-start
  • inline-end

Load Browser Support ▼

permalink MDN info W3C info

css2

clip

Applies only to absolutely positioned elements. This property is now technically deprecated, replaced by clip-path, but browsers are required to support it for backwards-compatibility. Some older browsers used commas instead of spaces to separate the length values.

Load Browser Support ▼

permalink MDN info W3C info

css2 masking

clip-path

This replaces the now-deprecated clip property. The clipPath value is a URL that points to an SVG clipPath. The two-value syntax can mix and match keywords and shape functions.

Load Browser Support ▼

permalink MDN info W3C info

css3 masking

color

  • [ initial value depends on UA ]
  • currentColor
  • transparent
  • <color>

Load Browser Support ▼

permalink MDN info W3C info

css2

color-adjust

  • economy
  • exact

Load Browser Support ▼

permalink MDN info W3C info

css3

column-count

Part of CSS multiple columns.

Load Browser Support ▼

permalink MDN info W3C info

css3 multi-column columns

column-fill

  • balance
  • auto
  • balance-all

Part of CSS multiple columns.

Load Browser Support ▼

permalink MDN info W3C info

css3 multi-column columns

column-gap

The legacy grid-column-gap property is now an alias for this property and has the same browser support.

Load Browser Support ▼

permalink MDN info W3C info

css3 multi-column columns grid

column-rule

This is a shorthand property that accepts one to three space-separated values that represent:

  • [column‑rule‑width] [column‑rule‑style] [column‑rule‑color]

Load Browser Support ▼

Part of CSS Multi-column module.

permalink MDN info W3C info

css3 multi-column columns

column-rule-color

  • [ Initial value depends on UA ]
  • currentColor
  • transparent
  • <color>

Part of CSS Multi-column module.

Load Browser Support ▼

permalink MDN info W3C info

css3 multi-column columns

column-rule-style

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

Part of CSS Multi-column module.

Load Browser Support ▼

permalink MDN info W3C info

css3 multi-column columns

column-rule-width

Part of CSS Multi-column module.

Load Browser Support ▼

permalink MDN info W3C info

css3 multi-column columns

column-span

  • none
  • all

Part of CSS Multi-column module.

Load Browser Support ▼

permalink MDN info W3C info

css3 columns multi-column

column-width

Part of CSS multi-column module.

Load Browser Support ▼

permalink MDN info W3C info

css3 multi-column columns

columns

This is a shorthand property that accepts two space-separated values that represent:

  • [column‑width] [column‑count]

Part of CSS Multi-column module.

Load Browser Support ▼

permalink MDN info W3C info

css3 column columns multi-column

content

Applies to ::before and ::after pseudo-elements.

Load Browser Support ▼

permalink MDN info W3C info

css2 pseudo pseudo-element

content-visibility

  • visible
  • hidden
  • auto

Load Browser Support ▼

permalink MDN info W3C info

css3

counter-increment

Part of CSS counters. The integer value is optional (default is 1).

Load Browser Support ▼

permalink MDN info W3C info

css2 counters

counter-reset

Part of CSS counters. The integer value is optional (default is 0).

Load Browser Support ▼

permalink MDN info W3C info

css2 counters

counter-set

Part of CSS counters. The integer value is optional (default is 0).

Load Browser Support ▼

permalink MDN info W3C info

css3 counters

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

css2 pointer

direction

  • ltr
  • rtl

Load Browser Support ▼

permalink MDN info W3C info

css2

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

css2

empty-cells

  • show
  • hide

Applies to table cells.

Load Browser Support ▼

permalink MDN info W3C info

css2 tables

filter

When using the function values, accepts a space-separated list of one or more functions.

The multiple-function syntax can mix and match any functions. The drop-shadow() function has the same syntax rules as the box-shadow and text-shadow properties.

Load Browser Support ▼

permalink MDN info W3C info

css3 compositing filters

flex

This is a shorthand property that accepts one to three space-separated values representing:

  • [flex‑grow] [flex‑shrink] [flex‑basis]
  • none

Load Browser Support ▼

permalink MDN info W3C info

css3 flexbox

flex-basis

Load Browser Support ▼

permalink MDN info W3C info

css3 flexbox

flex-direction

  • row
  • row-reverse
  • column
  • column-reverse

Load Browser Support ▼

permalink MDN info W3C info

css3 flexbox

flex-flow

This is a shorthand property that accepts one or two space-separated values representing:

  • [flex‑direction] [flex‑wrap]

Load Browser Support ▼

permalink MDN info W3C info

css3 flexbox

flex-grow

Load Browser Support ▼

permalink MDN info W3C info

css3 flexbox

flex-shrink

Load Browser Support ▼

permalink MDN info W3C info

css3 flexbox

flex-wrap

  • nowrap
  • wrap
  • wrap-reverse

Load Browser Support ▼

permalink MDN info W3C info

css3 flexbox

float

  • none
  • left
  • right
  • inline-start
  • inline-end

New Values:

  • block-start
  • block-end
  • snap-block
  • snap-block()
  • snap-inline
  • snap-inline()
  • top
  • bottom

Load Browser Support ▼

permalink MDN info W3C info

css2

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

css2 typography

font-family

  • [ Initial value depends on UA ]
  • <family-name>
  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace
  • system-ui
  • emoji
  • math
  • fangsong
  • ui-serif
  • ui-sans-serif
  • ui-monospace
  • ui-rounded

Font stacks are created by comma-separating font names. A final <generic-family> is recommended in the stack.

Load Browser Support ▼

permalink MDN info W3C info

css2 typography

font-feature-settings

Controls advanced typographic features in OpenType fonts. The string value must be exactly four characters.

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

font-kerning

  • auto
  • normal
  • none

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

font-language-override

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

font-optical-sizing

  • auto
  • none

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

font-size

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

Load Browser Support ▼

permalink MDN info W3C info

css2 typography

font-size-adjust

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

font-stretch

  • normal
  • semi-condensed
  • condensed
  • extra-condensed
  • ultra-condensed
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded
  • <percentage>

Load Browser Support ▼

permalinkMDN info W3C info

css3 typography

font-style

  • normal
  • italic
  • oblique
  • oblique <angle>

Load Browser Support ▼

permalink MDN info W3C info

css2 typography

font-synthesis

  • weight style
  • none
  • weight
  • style

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

font-variant

This is a shorthand property that can also accept keywords and function values.

  • normal
  • small-caps
  • all-small-caps
  • petite-caps
  • all-petite-caps
  • unicase
  • titling-caps
  • none
  • [font‑variant‑caps] [font‑variant‑numeric] [font‑variant‑alternates] [font‑variant‑ligatures] [font‑variant‑east‑asian]

Load Browser Support ▼

permalink MDN info W3C info

css2 typography

font-variant-caps

  • normal
  • unicase
  • titling-caps
  • small-caps
  • petite-caps
  • all-small-caps
  • all-petite-caps

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

font-variant-east-asian

  • normal
  • jis78
  • jis83
  • jis90
  • jis04
  • simplified
  • traditional
  • full-width
  • proportional-width
  • ruby

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

font-variant-emoji

  • auto
  • text
  • emoji
  • unicode

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

font-variant-ligatures

  • normal
  • none
  • common-ligatures
  • no-common-ligatures
  • discretionary-ligatures
  • no-discretionary-ligatures
  • historical-ligatures
  • no-historical-ligatures
  • contextual
  • no-contextual

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

font-variant-numeric

  • normal
  • ordinal
  • slashed-zero
  • lining-nums
  • oldstyle-nums
  • proportional-nums
  • tabular-nums
  • diagonal-fractions
  • stacked-fractions

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

font-variant-position

  • normal
  • sub
  • super

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

font-weight

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

Load Browser Support ▼

permalink MDN info W3C info

css2 typography

footnote-display

  • normal
  • sub
  • super

Load Browser Support ▼

permalink MDN info W3C info

css3

footnote-policy

  • auto
  • line
  • block

Load Browser Support ▼

permalink MDN info W3C info

css3

forced-color-adjust

  • auto
  • none

Load Browser Support ▼

permalink MDN info W3C info

css3

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

css3 grid

grid

This is a shorthand property that also accepts keywords.

  • [grid‑template]
  • [grid‑template‑rows] / auto‑flow [grid‑auto‑columns]
  • [grid‑template‑rows] / auto‑flow dense [grid‑auto‑columns]
  • auto‑flow / [grid‑auto‑rows] / [grid‑template‑columns]

Load Browser Support ▼

permalink MDN info W3C info

css3 grid

grid-area

This is a shorthand property that can take 1 to 4 values, separated by forward slashes, that represent:

  • [grid‑row‑start] / [grid‑column‑start] / [grid‑row‑end] / [grid‑column‑end]

Load Browser Support ▼

permalink MDN info W3C info

css3 grid

grid-auto-columns

Examples using multiple track-size values:

Load Browser Support ▼

permalink MDN info W3C info

css3 grid

grid-auto-flow

  • row
  • column
  • dense
  • row dense
  • column dense

Load Browser Support ▼

permalink MDN info W3C info

css3 grid

grid-auto-rows

Examples using multiple track-size values:

Load Browser Support ▼

permalink MDN info W3C info

css3 grid

grid-column

This is a shorthand property that accepts one or two values, separated by a slash, that represent:

  • [grid‑column‑start] / [grid‑column‑end]

Load Browser Support ▼

permalink MDN info W3C info

css3 grid

grid-column-end

This is a shorthand property that accepts one or two values, separated by a slash, that represent:

Load Browser Support ▼

permalink MDN info W3C info

css3 grid

grid-column-start

Load Browser Support ▼

permalink MDN info W3C info

css3 grid

grid-row

This is a shorthand property that accepts one or two values, separated by a slash, that represent:

  • [grid‑row‑start] / [grid‑row‑end]

Load Browser Support ▼

permalink MDN info W3C info

css3 grid

grid-row-end

Load Browser Support ▼

permalink MDN info W3C info

css3 grid

grid-row-start

Load Browser Support ▼

permalink MDN info W3C info

css3 grid

grid-template

This is a shorthand property. Values represent:

  • [grid‑template‑columns] [grid‑template‑rows] [grid‑template‑areas]

Load Browser Support ▼

permalink MDN info W3C info

css3 grid

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

css3 grid

grid-template-columns

Examples using auto-track-list values:

Load Browser Support ▼

permalink MDN info W3C info

css3 grid

grid-template-rows

Examples using auto-track-list values:

Load Browser Support ▼

permalink MDN info W3C info

css3 grid

hanging-punctuation

  • none
  • first
  • last
  • force-end
  • allow-end
  • last force-end
  • first allow-end last

Two or three keywords can be mixed and matched.

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

height

Load Browser Support ▼

permalink MDN info W3C info

css2

hyphens

  • manual
  • none
  • auto

Browser support below is for English. For support in other languages, see hyphens on caniuse.com.

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

image-orientation

Load Browser Support ▼

permalink MDN info W3C info

css3

image-rendering

  • auto
  • smooth
  • high-quality
  • crisp-edges
  • pixelated

Load Browser Support ▼

permalink MDN info W3C info

css3

image-resolution

Load Browser Support ▼

permalink MDN info W3C info

css3

initial-letter

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

initial-letter-align

  • alphabetic
  • border-box
  • ideographic
  • hebrew
  • hanging

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

initial-letter-wrap

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

inline-size

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

inline-sizing

  • normal
  • stretch

Load Browser Support ▼

permalink MDN info W3C info

css3

inset

This is a shorthand property. Values represent:

  • [top] [right] [bottom] [left]

Load Browser Support ▼

permalink MDN info W3C info

css3 positioning logical

inset-block

This is a shorthand property. Values represent:

  • [inset‑block‑start] [inset‑block‑end]

Load Browser Support ▼

permalink MDN info W3C info

css3 positioning logical

inset-block-end

Load Browser Support ▼

permalink MDN info W3C info

css3 positioning logical

inset-block-start

Load Browser Support ▼

permalink MDN info W3C info

css3 positioning logical

inset-inline

This is a shorthand property. Values represent:

  • [inset‑inline‑start] [inset‑inline‑end]

Load Browser Support ▼

permalink MDN info W3C info

css3 positioning logical

inset-inline-end

Load Browser Support ▼

permalink MDN info W3C info

css3 positioning logical

inset-inline-start

Load Browser Support ▼

permalink MDN info W3C info

css3 positioning logical

isolation

  • auto
  • isolate

Load Browser Support ▼

permalink MDN info W3C info

css3 compositing

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

css3 flexbox grid

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

css3 grid

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

css3 grid

left

Applies to positioned elements.

Load Browser Support ▼

permalink MDN info W3C info

css2 positioning

letter-spacing

Load Browser Support ▼

permalink MDN info W3C info

css2 font

lighting-color

Load Browser Support ▼

permalink MDN info W3C info

css3 compositing filters

line-break

  • auto
  • strict
  • normal
  • loose
  • anywhere

Load Browser Support ▼

permalink MDN info W3C info

css3

line-clamp

Browsers are required to support the vendor-specific -webkit-line-clamp property as an alias for this property.

Load Browser Support ▼

permalink MDN info W3C info

css3 webkit-line-clamp webkit -webkit-line-clamp

line-grid

This is a shorthand property. Values represent:

  • match-parent
  • create

Load Browser Support ▼

permalink MDN info W3C info

css3

line-height

Load Browser Support ▼

permalink MDN info W3C info

css2

line-padding

Load Browser Support ▼

permalink MDN info W3C info

css3

line-snap

  • none
  • baseline
  • contain

Load Browser Support ▼

permalink MDN info W3C info

css3

list-style

This is a shorthand property. Values represent:

  • [list‑style‑position] [list‑style‑image] [list‑style‑type]

Load Browser Support ▼

permalink MDN info W3C info

css2

list-style-image

Load Browser Support ▼

permalink MDN info W3C info

css2

list-style-position

  • outside
  • inside

Load Browser Support ▼

permalink MDN info W3C info

css2

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

css2

margin

This is a shorthand property. Values represent:

  • [margin‑top] [margin‑right] [margin‑bottom] [margin‑left]

Load Browser Support ▼

permalink MDN info W3C info

css2

margin-block

This is a shorthand property that accepts one to three space-separated values.

  • [margin‑block‑start] [margin‑block‑end]

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

margin-block-end

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

  • [margin‑top] [margin‑left] [margin‑bottom] [margin‑right]

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

margin-block-start

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

  • [margin‑top] [margin‑left] [margin‑bottom] [margin‑right]

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

margin-bottom

Load Browser Support ▼

permalink MDN info W3C info

css2

margin-break

  • auto
  • keep
  • discard

Load Browser Support ▼

permalink MDN info W3C info

css3

margin-inline

This is a shorthand property that accepts one or two space-separated values.

  • [margin‑inline‑start] [margin‑inline‑end]

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

margin-inline-end

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

  • [margin‑top] [margin‑left] [margin‑bottom] [margin‑right]

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

margin-inline-start

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

  • [margin‑top] [margin‑left] [margin‑bottom] [margin‑right]

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

margin-left

Load Browser Support ▼

permalink MDN info W3C info

css2

margin-right

Load Browser Support ▼

permalink MDN info W3C info

css2

margin-top

Load Browser Support ▼

permalink MDN info W3C info

css2

margin-trim

  • none
  • in-flow
  • all

Load Browser Support ▼

permalink MDN info W3C info

css3

mask

This is a shorthand property. Values represent:

  • [mask‑clip] [mask‑composite] [mask‑image] [mask‑mode] [mask‑origin] [mask‑position] [mask‑repeat] [mask‑size]

Load Browser Support ▼

permalink MDN info W3C info

css3 masking

mask-border

This is a shorthand property. Values represent:

  • [mask‑border‑source] [mask‑border‑slice] [mask‑border‑width] [mask‑border‑outset] [mask‑border‑repeat] [mask‑border‑mode]

Load Browser Support ▼

permalink MDN info W3C info

css3 masking

mask-border-mode

  • alpha
  • luminance

Load Browser Support ▼

permalink MDN info W3C info

css3 masking

mask-border-repeat

Accepts one or two space-separated values.

  • stretch
  • repeat
  • round
  • space
  • stretch space
  • repeat round

Load Browser Support ▼

permalink MDN info W3C info

css3 masking

mask-border-slice

Accepts one to four space separated values and an optional keyword.

Load Browser Support ▼

permalink MDN info W3C info

css3 masking

mask-border-source

Load Browser Support ▼

permalink MDN info W3C info

css3 masking

mask-border-width

Accepts one to four space separated values.

Load Browser Support ▼

permalink MDN info W3C info

css3 masking

mask-clip

  • border-box
  • content-box
  • padding-box
  • fill-box
  • stroke-box
  • view-box
  • no-clip

Accepts one or more comma-separated mask-clip layers (i.e. similar to layered multiple backgrounds).

Load Browser Support ▼

permalink MDN info W3C info

css3 masking

mask-composite

  • add
  • subtract
  • intersect
  • exclude

Accepts one or more comma-separated mask-composite layers (i.e. similar to layered multiple backgrounds).

Load Browser Support ▼

permalink MDN info W3C info

css3 masking

mask-image

Accepts one or more comma-separated mask-image layers (i.e. similar to layered multiple backgrounds).

Load Browser Support ▼

permalink MDN info W3C info

css3 masking

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

css3 masking

mask-origin

  • border-box
  • content-box
  • padding-box
  • fill-box
  • stroke-box
  • view-box

Accepts one or more comma-separated mask-origin layers (i.e. similar to layered multiple backgrounds).

Load Browser Support ▼

permalink MDN info W3C info

css3 masking

mask-position

Accepts one or more comma-separated mask-position layers (i.e. similar to layered multiple backgrounds).

Load Browser Support ▼

permalink MDN info W3C info

css3 masking

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

css3 masking

mask-size

Accepts one or more comma-separated mask-size layers (i.e. similar to layered multiple backgrounds).

Load Browser Support ▼

permalink MDN info W3C info

css3 masking

mask-type

  • luminance
  • alpha

Load Browser Support ▼

permalink MDN info W3C info

css3 masking

max-block-size

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

max-height

Load Browser Support ▼

permalink MDN info W3C info

css2

max-lines

Load Browser Support ▼

permalink MDN info W3C info

css3

max-width

Load Browser Support ▼

permalink MDN info W3C info

css2

min-height

Load Browser Support ▼

permalink MDN info W3C info

css2

min-width

Load Browser Support ▼

permalink MDN info W3C info

css2

mix-blend-mode

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

Load Browser Support ▼

permalink MDN info W3C info

css3 compositing

object-fit

  • fill
  • none
  • cover
  • scale-down
  • contain scale-down
  • cover scale-down

Load Browser Support ▼

permalink MDN info W3C info

css3

object-position

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

css3

offset

This is a shorthand property. Values represent:

  • [offset‑position] [offset‑path] [offset‑distance] [offset‑rotate] [offset‑anchor]

Load Browser Support ▼

permalink MDN info W3C info

css3 motion

offset-anchor

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

css3 motion

offset-distance

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

css3 motion

offset-path

Load Browser Support ▼

permalink MDN info W3C info

css3 motion

offset-position

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

css3 motion

offset-rotate

Load Browser Support ▼

permalink MDN info W3C info

css3 motion

opacity

Load Browser Support ▼

permalink MDN info W3C info

css3

order

Load Browser Support ▼

permalink MDN info W3C info

css3 flexbox

orphans

Part of CSS paged media.

Load Browser Support ▼

permalink MDN info W3C info

css2 paged

outline

This is a shorthand property. Values represent:

  • [outline‑color] [outline‑style] [outline‑width]

Load Browser Support ▼

permalink MDN info W3C info

css2

outline-color

Load Browser Support ▼

Modern browsers do not support the invert keyword, which is assigned as the initial value in the spec.

permalink MDN info W3C info

css2

outline-offset

Load Browser Support ▼

permalink MDN info W3C info

css3

outline-style

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

Load Browser Support ▼

permalink MDN info W3C info

css2

outline-width

Load Browser Support ▼

permalink MDN info W3C info

css2

overflow

This is a shorthand property that accepts one or two space separated values representing:

  • [overflow‑x] [overflow‑y]

Load Browser Support ▼

permalink MDN info W3C info

css2

overflow-anchor

  • auto
  • none

Load Browser Support ▼

permalink MDN info W3C info

css3

overflow-block

  • visible
  • hidden
  • clip
  • scroll
  • auto

Corresponds to overflow-y.

Load Browser Support ▼

permalink MDN info W3C info

css3

overflow-clip-margin

Load Browser Support ▼

permalink MDN info W3C info

css3

overflow-inline

  • visible
  • hidden
  • clip
  • scroll
  • auto

Corresponds to overflow-x.

Load Browser Support ▼

permalink MDN info W3C info

css3

overflow-wrap

  • normal
  • break-word
  • anywhere

Load Browser Support ▼

Deeper browser support is possible by using the alternate syntax word-wrap.

permalink MDN info W3C info

css3

overflow-x

  • visible
  • hidden
  • clip
  • scroll
  • auto

Load Browser Support ▼

permalink MDN info W3C info

css3

overflow-y

  • visible
  • hidden
  • clip
  • scroll
  • auto

Load Browser Support ▼

permalink MDN info W3C info

css3

overscroll-behavior

This is a shorthand property. Values represent:

  • [overscroll‑behavior‑x] [overscroll‑behavior‑y]

Load Browser Support ▼

permalink MDN info W3C info

css3 scrollbars

overscroll-behavior-block

  • auto
  • contain
  • none

Load Browser Support ▼

permalink MDN info W3C info

css3 scrollbars

overscroll-behavior-inline

  • auto
  • contain
  • none

Load Browser Support ▼

permalink MDN info W3C info

css3 scrollbars

overscroll-behavior-x

  • auto
  • contain
  • none

Load Browser Support ▼

permalink MDN info W3C info

css3 scrollbars

overscroll-behavior-y

  • auto
  • contain
  • none

Load Browser Support ▼

permalink MDN info W3C info

css3 scrollbars

padding

This is a shorthand property that accepts 1 to 4 space-separated values representing:

  • [padding‑top] [padding‑right] [padding‑bottom] [padding‑left]

Load Browser Support ▼

permalink MDN info W3C info

css2

padding-block

This is a shorthand property that accepts one or two space-separated values representing:

  • [padding‑block‑start] [padding‑block‑end]

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

padding-block-end

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

padding-block-start

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

padding-bottom

Load Browser Support ▼

permalink MDN info W3C info

css2

padding-inline

This is a shorthand property that accepts one or two space-separated values representing:

  • [padding‑inline‑start] [padding‑inline‑end]

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

padding-inline-end

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

padding-inline-start

Load Browser Support ▼

permalink MDN info W3C info

css3 logical

padding-left

Load Browser Support ▼

permalink MDN info W3C info

css2

padding-right

Load Browser Support ▼

permalink MDN info W3C info

css2

padding-top

Load Browser Support ▼

permalink MDN info W3C info

css2

page

Load Browser Support ▼

permalink MDN info W3C info

css3 paged

page-break-after

  • auto
  • always
  • avoid
  • left
  • right

This property has been replaced by break-after.

Load Browser Support ▼

permalink MDN info W3C info

css2 paged

page-break-before

  • auto
  • always
  • avoid
  • left
  • right

This property has been replaced by break-before.

Load Browser Support ▼

permalink MDN info W3C info

css2 paged

page-break-inside

  • auto
  • avoid

This property has been replaced by break-inside.

Load Browser Support ▼

permalink MDN info W3C info

css2 paged

page-orientation

  • upright
  • rotate-left
  • rotate-right

Can be used only inside an @page rule.

Load Browser Support ▼

permalink MDN info W3C info

css3 paged

perspective

Load Browser Support ▼

permalink MDN info W3C info

css3 3d

perspective-origin

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

css3 3d

place-content

This is a shorthand property. Values represent:

  • [align‑content] [justify‑content]

Load Browser Support ▼

permalink MDN info W3C info

css3

place-items

This is a shorthand property. Values represent:

  • [align‑items] [justify‑items]

Load Browser Support ▼

permalink MDN info W3C info

css3

place-self

This is a shorthand property. Values represent:

  • [align‑self] [justify‑self]

Load Browser Support ▼

permalink MDN info W3C info

css3

pointer-events

  • auto
  • none

The spec defines eight other values that apply only to SVG elements.

Load Browser Support ▼

permalink MDN info W3C info

css3

position

  • static
  • relative
  • absolute
  • sticky
  • fixed

Load Browser Support ▼

permalink MDN info W3C info

css2 positioning

quotes

Used along with :before and :after pseudo-elements.

Load Browser Support ▼

permalink MDN info W3C info

css2 pseudo-element content

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

css3

rotate

Load Browser Support ▼

permalink MDN info W3C info

css3 transforms

row-gap

The legacy grid-row-gap property is now an alias for this property and has the same browser support.

Load Browser Support ▼

permalink MDN info W3C info

css3 grid

scale

Numbers represent values for the x, y, and z axes.

Load Browser Support ▼

permalink MDN info W3C info

css3 transforms

scroll-behavior

  • auto
  • smooth

Load Browser Support ▼

permalink MDN info W3C info

css3 scrollbars

scroll-margin

This is a shorthand property that accepts one to four space separated values representing:

  • [scroll‑margin‑top] [scroll‑margin‑right] [scroll‑margin‑bottom] [scroll‑margin‑left]

Load Browser Support ▼

permalink MDN info W3C info

css3 snap scroll-snap

scroll-margin-block

This is a shorthand property that accepts one or two space separated values representing:

  • [scroll‑margin‑block‑start] [scroll‑margin‑block‑end]

Load Browser Support ▼

permalink MDN info W3C info

css3 snap scroll-snap

scroll-margin-block-end

Load Browser Support ▼

permalink MDN info W3C info

css3 snap scroll-snap

scroll-margin-block-start

Load Browser Support ▼

permalink MDN info W3C info

css3 snap scroll-snap

scroll-margin-bottom

Load Browser Support ▼

permalink MDN info W3C info

css3 snap scroll-snap

scroll-margin-inline

This is a shorthand property that accepts one or two space separated values representing:

  • [scroll‑margin‑inline‑start] [scroll‑margin‑inline‑end]

Load Browser Support ▼

permalink MDN info W3C info

css3 snap scroll-snap

scroll-margin-inline-end

Load Browser Support ▼

permalink MDN info W3C info

css3 snap scroll-snap

scroll-margin-inline-start

Load Browser Support ▼

permalink MDN info W3C info

css3 snap scroll-snap

scroll-margin-left

Load Browser Support ▼

permalink MDN info W3C info

css3 snap scroll-snap

scroll-margin-right

Load Browser Support ▼

permalink MDN info W3C info

css3 snap scroll-snap

scroll-margin-top

Load Browser Support ▼

permalink MDN info W3C info

css3 snap scroll-snap

scroll-padding

This is a shorthand property that accepts one to four space separated values representing:

  • [scroll‑padding‑top] [scroll‑padding‑right] [scroll‑padding‑bottom] [scroll‑padding‑left]

Load Browser Support ▼

permalink MDN info W3C info

css3 snap scroll-snap

scroll-padding-block

This is a shorthand property that accepts one or two space separated values representing:

  • [scroll‑padding‑block‑start] [scroll‑padding‑block‑end]

Load Browser Support ▼

permalink MDN info W3C info

css3 snap scroll-snap

scroll-padding-block-end

Load Browser Support ▼

permalink MDN info W3C info

css3 snap scroll-snap

scroll-padding-block-start

Load Browser Support ▼

permalink MDN info W3C info

css3 snap scroll-snap

scroll-padding-bottom

Load Browser Support ▼

permalink MDN info W3C info

css3 snap scroll-snap

scroll-padding-inline

This is a shorthand property that accepts one or two space separated values representing:

  • [scroll‑padding‑inline‑start] [scroll‑padding‑inline‑end]

Load Browser Support ▼

permalink MDN info W3C info

css3 snap scroll-snap

scroll-padding-inline-end

Load Browser Support ▼

permalink MDN info W3C info

css3 snap scroll-snap

scroll-padding-inline-start

Load Browser Support ▼

permalink MDN info W3C info

css3 snap scroll-snap

scroll-padding-left

Load Browser Support ▼

permalink MDN info W3C info

css3 snap scroll-snap

scroll-padding-right

Load Browser Support ▼

permalink MDN info W3C info

css3 snap scroll-snap

scroll-padding-top

Load Browser Support ▼

permalink MDN info W3C info

css3 snap scroll-snap

scroll-snap-align

  • none
  • start
  • end
  • center
  • start end
  • end center

Load Browser Support ▼

permalink MDN info W3C info

css3 snap scroll-snap

scroll-snap-stop

  • normal
  • always

Load Browser Support ▼

permalink MDN info W3C info

css3 snap scroll-snap

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

css3 snap scroll-snap

scrollbar-color

Load Browser Support ▼

permalink MDN info W3C info

css3 scrollbars

scrollbar-gutter

  • auto
  • stable
  • always
  • stable both force
  • always both force

Load Browser Support ▼

permalink MDN info W3C info

css3 scrollbars

scrollbar-width

  • auto
  • thin
  • none

Load Browser Support ▼

permalink MDN info W3C info

css3 scrollbars

shape-image-threshold

Load Browser Support ▼

permalink MDN info W3C info

css3 shapes

shape-inside

Load Browser Support ▼

permalink MDN info W3C info

css3 shapes

shape-margin

Load Browser Support ▼

permalink MDN info W3C info

css3 shapes

shape-outside

Any shape function can be mixed with any *-box keywords.

Load Browser Support ▼

permalink MDN info W3C info

css3 shapes

shape-padding

Load Browser Support ▼

permalink MDN info W3C info

css3 shapes

spatial-navigation-action

  • auto
  • focus
  • scroll

Load Browser Support ▼

permalink MDN info W3C info

css3

spatial-navigation-contain

  • auto
  • contain

Load Browser Support ▼

permalink MDN info W3C info

css3

spatial-navigation-function

  • normal
  • grid

Load Browser Support ▼

permalink MDN info W3C info

css3

string-set

Load Browser Support ▼

permalink MDN info W3C info

css3

tab-size

Load Browser Support ▼

permalink MDN info W3C info

css3

table-layout

  • auto
  • fixed

Applies to HTML table elements.

Load Browser Support ▼

permalink MDN info W3C info

css2 tables

text-align

  • start
  • end
  • left
  • right
  • center
  • justify
  • match-parent
  • justify-all

Load Browser Support ▼

permalink MDN info W3C info

css2 typography

text-align-all

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

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

text-align-last

  • auto
  • start
  • end
  • left
  • right
  • center
  • justify
  • match-parent

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

text-combine-upright

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

text-decoration

This is a shorthand property. Values represent:

  • [text‑decoration‑line] [text‑decoration‑thickness] [text‑decoration‑style] [text‑decoration‑color]

Load Browser Support ▼

permalink MDN info W3C info

css2

text-decoration-color

Load Browser Support ▼

permalink MDN info W3C info

css3

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

css3

text-decoration-skip

  • none
  • auto

Load Browser Support ▼

permalink MDN info W3C info

css3

text-decoration-style

  • solid
  • double
  • dotted
  • dashed
  • wavy

Load Browser Support ▼

permalink MDN info W3C info

css3

text-decoration-thickness

Load Browser Support ▼

permalink MDN info W3C info

css3

text-emphasis

This is a shorthand property. Values represent:

  • [text‑emphasis‑style] [text‑emphasis‑color]

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

text-emphasis-position

  • over right
  • over all
  • under right
  • under all

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

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

css3 typography

text-group-align

  • none
  • start
  • end
  • left
  • right
  • center

Load Browser Support ▼

permalink MDN info W3C info

css3

text-indent

Load Browser Support ▼

permalink MDN info W3C info

css2 typography

text-justify

  • auto
  • none
  • inter-word
  • inter-character

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

text-orientation

  • mixed
  • upright
  • sideways

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

text-overflow

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

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

css3 typography

text-shadow

The <length> values are horizontal offset, vertical offset, and blur. Multiple shadows are applied by comma-separating value sets.

Load Browser Support ▼

permalink MDN info W3C info

css3

text-size-adjust

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

text-space-trim

  • none
  • trim-inner
  • discard-before
  • discard-after

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

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

css3 typography

text-transform

  • none
  • capitalize
  • uppercase
  • lowercase
  • capitalize
  • full-width
  • full-size-kana

Load Browser Support ▼

permalink MDN info W3C info

css2 typography

text-underline-offset

Load Browser Support ▼

permalink MDN info W3C info

css3

text-underline-position

  • auto
  • from-font
  • under
  • left
  • right
  • from-font left
  • from-font right
  • under left
  • under right

Load Browser Support ▼

permalink MDN info W3C info

css3

text-wrap

  • wrap
  • nowrap
  • balance
  • stable
  • pretty

Load Browser Support ▼

permalink MDN info W3C info

css3

top

Applies to positioned elements.

Load Browser Support ▼

permalink MDN info W3C info

css2 positioning top

touch-action

  • auto
  • none
  • pan-x
  • pan-left
  • pan-right
  • pan-y
  • pan-up
  • pan-down
  • manipulation

Load Browser Support ▼

permalink MDN info W3C info

css3

transform

Accepts multiple space-separated transform functions.

Load Browser Support ▼

permalink MDN info W3C info

css3 transforms matrix skew skewx skewy translatex translatey scalex scaley translate3d translatez scale3d scalez rotate3d rotatex rotatey rotatez perspective scale
rotate translate

transform-box

  • view-box
  • content-box
  • border-box
  • fill-box
  • stroke-box

Load Browser Support ▼

permalink MDN info W3C info

css3 transforms

transform-origin

Can be up to three space-separated values (keywords or values) representing X, Y, and Z offsets.

Load Browser Support ▼

permalink MDN info W3C info

css3 transforms

transform-style

  • flat
  • preserve-3d

Part of 3D transforms.

Load Browser Support ▼

permalink MDN info W3C info

css3 3d

transition

This is a shorthand property. Values represent:

  • [transition‑property] [transition‑duration] [transition‑timing‑function] [transition‑delay]

Multiple transitions are defined by comma-separating value sets.

Load Browser Support ▼

permalink MDN info W3C info

css3

transition-delay

Multiple delays are defined by comma-separating values.

Load Browser Support ▼

permalink MDN info W3C info

css3

transition-duration

Multiple durations are defined by comma-separating values.

Load Browser Support ▼

permalink MDN info W3C info

css3

transition-property

  • all
  • none
  • color
  • color, border-bottom

Can be any valid animatable CSS property. Multiple transition properties are defined by comma-separating values.

Load Browser Support ▼

permalink MDN info W3C info

css3

transition-timing-function

First and third values in the cubic-bezier() function must be a number between 0 and 1. Multiple timing functions are defined by comma-separating values.

Load Browser Support ▼

permalink MDN info W3C info

css3

translate

Accepts one to three space-separated values representing the X, Y, and Z axes.

Load Browser Support ▼

permalink MDN info W3C info

css3 transforms

unicode-bidi

  • normal
  • embed
  • isolate
  • bidi-override
  • isolate-override
  • plaintext

Load Browser Support ▼

permalink MDN info W3C info

css2

user-select

  • auto
  • text
  • none
  • contain
  • all

Load Browser Support ▼

permalink MDN info W3C info

css3

vertical-align

The first four values render differently when applied to table cells.

Load Browser Support ▼

permalink MDN info W3C info

css2

visibility

  • visible
  • hidden
  • collapse

Load Browser Support ▼

permalink MDN info W3C info

css2

white-space

  • normal
  • pre
  • nowrap
  • pre-wrap
  • pre-line

Load Browser Support ▼

permalink MDN info W3C info

css2 typography

widows

Load Browser Support ▼

Part of CSS paged media.

permalink MDN info W3C info

css2 typography paged

width

Load Browser Support ▼

permalink MDN info W3C info

css2

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

css3

word-break

  • normal
  • keep-all
  • break-all
  • break-word

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

word-spacing

Load Browser Support ▼

permalink MDN info W3C info

css2 typography

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

css2 typography

wrap-after

  • auto
  • avoid
  • avoid-line
  • avoid-flex
  • line
  • flex

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

wrap-before

  • auto
  • avoid
  • avoid-line
  • avoid-flex
  • line
  • flex

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

wrap-flow

  • auto
  • both
  • start
  • end
  • minimum
  • maximum
  • clear

Load Browser Support ▼

permalink MDN info W3C info

css3

wrap-inside

  • auto
  • avoid

Load Browser Support ▼

permalink MDN info W3C info

css3 typography

wrap-through

  • wrap
  • none

Load Browser Support ▼

permalink MDN info W3C info

css3

writing-mode

  • horizontal-tb
  • vertical-rl
  • vertical-lr
  • sideways-rl
  • sideways-lr

Load Browser Support ▼

permalink MDN info W3C info

css2 typography

z-index

Load Browser Support ▼

Applies to positioned elements.

permalink MDN info W3C info

css2 positioning

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.
  • The generic keyword values inherit, initial, and unset are omitted to avoid repetition.
help

Filtered Properties