content
normalnoneopen-quoteclose-quoteno-open-quoteno-close-quotecontentsimage()<string>attr()<counter>target-counter()target-text()leader()
Applies to ::before and ::after pseudo-elements.
css2 css3+ flexbox animations 3d transforms paged media grid scroll snap logical props tables masks positioning border-image columns typography motion path compositing text-decoration transforms scrollbars
accent-color
autocurrentColortransparent>color>
Only applies to certain form and/or UI elements.
align-content
For flexbox:
stretchflex-startflex-endcenterspace-betweenspace-around
For grid layout:
normalbaselinefirst baselinelast baselinespace-betweenspace-aroundspace-evenlystretchcenterstartendcenter safecenter unsafe
The safe and unsafe keywords are optional and can be used alongside any alignment keyword.
align-items
normalcenterflex-startflex-endstartendself-startself-endbaselinefirst baselinelast baselinestretchsafeunsafe
align-self
autonormalself-startself-endflex-startflex-endcenterbaselinefirst baselinelast baselinestretchsafeunsafe
all
This is a shorthand property that resets all CSS properties. Value can be one of the following:
initialinheritunsetrevert
This property affects all properties and so does not have an initial value.
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.
animation-delay
0s<time>
Accepts a comma-separated list of delay values to correspond to the animations identified in animation-name and the matching @keyframes at-rules.
animation-direction
normalreversealternate-reversealternate
Accepts a comma-separated list of direction values to correspond to the animations identified in animation-name and the matching @keyframes at-rules.
animation-duration
0s<time>
Accepts a comma-separated list of time values to correspond to the animations identified in animation-name and the matching @keyframes at-rules.
animation-fill-mode
noneforwardsbothbackwards
Accepts a comma-separated list of fill mode values to correspond to the animations identified in animation-name and the matching <@keyframes> at-rules.
animation-iteration-count
1infinite<number>
Accepts a comma-separated list of iteration counts to correspond to the animations identified in animation-name and the matching @keyframes at-rules.
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.
animation-play-state
runningpaused
Accepts a comma-separated list of play state values to correspond to the animations identified in animation-name and the matching @keyframes at-rules.
animation-timing-function
easelinearstep-startstep-endease-inease-outease-in-outsteps(<integer>)steps(<integer>, start)steps(<integer>, end)steps(<integer>, jump-start)steps(<integer>, jump-end)steps(<integer>, jump-none)steps(<integer>, jump-both)cubic-bezier(<number>, <number>, <number>, <number>)
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.
appearance
noneautotextfieldmenulist-buttonsearchfieldtextareapush-buttonslider-horizontalcheckboxradiosquare-buttonmenulistlistboxmeterprogress-barbutton
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.
aspect-ratio
auto<ratio>
backface-visibility
visiblehidden
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.
background-attachment
scrollfixedlocal
If multiple background images are defined, multiple background-attachment values are declared by comma-separating the values.
background-blend-mode
normalmultiplyscreenoverlaydarkenlightencolor-dodgecolor-burnhard-lightsoft-lightdifferenceexclusionhuesaturationcolorluminosity
background-clip
border-boxpadding-boxcontent-boxtext
If multiple background images are defined, multiple background-clip values are declared by comma-separating the values.
background-color
transparent<color-keyword><rgb-color><rgba-color><hsl-color><hsla-color>currentColor<system-color>
background-image
noneurl("path/file.png")<radial-gradient><linear-gradient><conic-gradient><repeating-gradient>element()image()image-set()cross-fade()
Multiple background images are defined using comma-separated values. URLs can be defined without quotes or with single quotes.
background-origin
padding-boxborder-boxcontent-box
This property has no effect on background images that have their background-attachment property set to "fixed".
background-position
0% 0%topbottomleftrightcenterright bottomleft topcenter 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.
background-repeat
repeatno-repeatspaceroundrepeat-yrepeat-xrepeat no-repeatround roundspace 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.
background-size
autoauto autocovercontainauto <percentage><percentage> <length><percentage><length> auto<length> <percentage><length>
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.
block-size
auto<length><percentage>max-contentmin-contentavailablefit-content<length> border-box<percentage> content-box
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.
border-block
This is a shorthand property that accepts one to three space-separated values.
[border‑block‑width] [border‑block‑style] [border‑block‑color]
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.
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.
border-block-end-color
This property depends on writing mode, direction, and text-orientation.
border-block-end-style
nonehiddendotteddashedsoliddoublegrooveridgeinsetoutset
This property depends on writing mode, direction, and text-orientation.
border-block-end-width
mediumthinthick<length>
This property depends on writing mode, direction, and text-orientation.
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.
border-block-start-color
This property depends on writing mode, direction, and text-orientation.
border-block-start-style
nonehiddendotteddashedsoliddoublegrooveridgeinsetoutset
This property depends on writing mode, direction, and text-orientation.
border-block-start-width
mediumthinthick<length>
This property depends on writing mode, direction, and text-orientation.
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.
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]
border-bottom
This is a shorthand property. Values represent:
[border‑bottom‑width] [border‑bottom‑style] [border‑bottom‑color]
border-bottom-color
<currentColor>transparent<color>
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
nonesolidridgeoutsetinsethiddengroovedoubledotteddashed
border-bottom-width
mediumthinthick<length>
border-collapse
separatecollapse
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.
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.
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.
border-image
This is a shorthand property. Values represent:
[border‑image‑source] [border‑image‑slice] / [border‑image‑width] / [border‑image‑outset] [border‑image‑repeat]
border-image-outset
This property accepts one to four space-separated values.
border-image-repeat
Accepts one or two space-separated values.
stretchspaceroundrepeatspace roundstretch repeat
Two values represent horizontal and vertical repeat. Values can be mixed and matched.
border-image-slice
Accepts one to four space-separated values.
100%<number><percentage><number> fill<percentage> fill
The fill keyword cannot be used on its own, it must precede or follow a length or percentage value.
border-image-source
noneurl("path/file.png")<radial-gradient><linear-gradient><conic-gradient><repeating-gradient>element()image()image-set()cross-fade()
URLs can be defined without quotes or with single quotes.
border-image-width
Accepts one to four space-separated values.
Value types can be mixed and matched.
border-inline
This is a shorthand property that accepts one to three space-separated values.
[border‑inline‑width] [border‑inline‑style] [border‑inline‑color]
border-inline-color
This is a shorthand that accepts one or two space-separated values representing:
[border‑inline‑start‑color] [border‑inline‑end‑color]
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]
border-inline-end-color
border-inline-end-style
nonehiddendotteddashedsoliddoublegrooveridgeinsetoutset
border-inline-end-width
mediumthinthick<length>
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]
border-inline-start-color
border-inline-start-style
nonehiddendotteddashedsoliddoublegrooveridgeinsetoutset
border-inline-start-width
mediumthinthick<length>
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]
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]
border-left
This is a shorthand property that accepts one to three space-separated values representing:
[border‑width] [border‑style] [border‑color]
border-left-color
<currentColor>transparent<color>
border-left-style
nonesolidridgeoutsetinsethiddengroovedoubledotteddashed
border-left-width
mediumthinthick<length>
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.
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]
border-right-color
<currentColor>transparent<color>
border-right-style
nonesolidridgeoutsetinsethiddengroovedoubledotteddashed
border-right-width
mediumthinthick<length>
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.
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.
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.
border-style
This is a shorthand property that accepts one to four space-separated values.
nonesolidridgeoutsetinsethiddengroovedoubledotteddashed
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.
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]
border-top-color
<currentColor>transparent<color>
border-top-left-radius
border-top-right-radius
border-top-style
nonesolidridgeoutsetinsethiddengroovedoubledotteddashed
border-top-width
mediumthinthick<length>
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]
bottom
auto<percentage><length>
Applies to positioned elements.
box-decoration-break
sliceclone
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.
box-sizing
content-boxborder-box
Firefox up to version 50 is the only browser that supports the padding-box value, which is now deprecated.
break-after
autoavoidalwaysallavoid-pagepageleftrightrectoversoavoid-columncolumnavoid-regionregion
Browser support is for Paged Media. For further browser support details see MDN or caniuse.com.
break-before
autoavoidalwaysallavoid-pagepageleftrightrectoversoavoid-columncolumnavoid-regionregion
Browser support is for Paged Media. For further browser support details see MDN or caniuse.com.
break-inside
autoavoidavoid-pageavoid-columnavoid-region
Browser support is for Paged Media. For further browser support details see MDN or caniuse.com.
caption-side
topbottominline-startinline-end
Applies to <caption> elements on HTML tables. Previous versions of Firefox supported a number of additional non-standard values.
caret-color
autocurrentColor<color>
clear
noneleftrightbothinline-startinline-end
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.
clip-path
none<clipPath>inset()circle()ellipse()polygon()path()margin-boxborder-boxpadding-boxcontent-boxfill-boxstroke-boxview-boxmargin-box inset()
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.
color
[ initial value depends on UA ]currentColortransparent<color>
color-adjust
economyexact
column-count
auto<integer>
Part of CSS multiple columns.
column-fill
balanceautobalance-all
Part of CSS multiple columns.
column-gap
normal<length><percentage>
The legacy grid-column-gap property is now an alias for this property and has the same browser support.
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]
Part of CSS Multi-column module.
column-rule-color
[ Initial value depends on UA ]currentColortransparent<color>
Part of CSS Multi-column module.
column-rule-style
nonesolidridgeoutsetinsethiddengroovedoubledotteddashed
Part of CSS Multi-column module.
column-rule-width
mediumthinthick<length>
Part of CSS Multi-column module.
column-span
noneall
Part of CSS Multi-column module.
column-width
auto<length>
Part of CSS multi-column module.
columns
This is a shorthand property that accepts two space-separated values that represent:
[column‑width] [column‑count]
Part of CSS Multi-column module.
content-visibility
visiblehiddenauto
counter-increment
Part of CSS counters. The integer value is optional (default is 1).
counter-reset
Part of CSS counters. The integer value is optional (default is 0).
counter-set
Part of CSS counters. The integer value is optional (default is 0).
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.
autourl("path/file.png")url("path/file.png") <number> <number>defaultnonecontext-menuhelppointerprogresswaitcellcrosshairtextvertical-textaliascopymoveno-dropnot-allowedgrabgrabbingall-scrollcol-resizerow-resizen-resizes-resizew-resizene-resizenw-resizese-resizesw-resizeew-resizens-resizenesw-resizenwse-resizezoom-inzoom-out
A URL value can take optional x and y <number> coordinates (from 0 to 32).
direction
ltrrtl
display
inlineblockinline-blockinline-tablerun-inflowflow-roottableflexgridrubylist-itemtable-row-grouptable-header-grouptable-footer-grouptable-rowtable-celltable-column-grouptable-columntable-captionruby-baseruby-textruby-base-containerruby-text-containercontentsnoneinline-flexinline-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.
empty-cells
showhide
Applies to table cells.
filter
When using the function values, accepts a space-separated list of one or more functions.
noneurl("filters.svg#filter-id");blur(<length>)brightness(<percentage>)contrast(<percentage>)drop-shadow(<length> <length> <length> <length> <color> inset)grayscale(<percentage>)hue-rotate(<angle>)invert(<percentage>)opacity(<percentage>)saturate(<percentage>)sepia(<percentage>)contrast(<percentage>) blur(<length>)
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.
flex
This is a shorthand property that accepts one to three space-separated values representing:
[flex‑grow] [flex‑shrink] [flex‑basis]none
flex-basis
autocontent<length><percentage>
flex-direction
rowrow-reversecolumncolumn-reverse
flex-flow
This is a shorthand property that accepts one or two space-separated values representing:
[flex‑direction] [flex‑wrap]
flex-grow
0<number>
flex-shrink
1<number>
flex-wrap
nowrapwrapwrap-reverse
float
noneleftrightinline-startinline-end
New Values:
block-startblock-endsnap-blocksnap-block()snap-inlinesnap-inline()topbottom
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]captioniconmenumessage-boxsmall-captionstatus-bar
For info on the order of values, mandatory values, etc., see this cheat sheet.
font-family
[ Initial value depends on UA ]<family-name>serifsans-serifcursivefantasymonospacesystem-uiemojimathfangsongui-serifui-sans-serifui-monospaceui-rounded
Font stacks are created by comma-separating font names. A final <generic-family> is recommended in the stack.
font-feature-settings
Controls advanced typographic features in OpenType fonts. The string value must be exactly four characters.
font-kerning
autonormalnone
font-language-override
normal<string>
font-optical-sizing
autonone
font-size
mediumxx-smallx-smallsmalllargex-largexx-largexxx-largesmallerlarger<length><percentage>
font-size-adjust
none<number>
font-stretch
normalsemi-condensedcondensedextra-condensedultra-condensedsemi-expandedexpandedextra-expandedultra-expanded<percentage>
font-style
normalitalicobliqueoblique <angle>
font-synthesis
weight stylenoneweightstyle
font-variant
This is a shorthand property that can also accept keywords and function values.
normalsmall-capsall-small-capspetite-capsall-petite-capsunicasetitling-capsnone[font‑variant‑caps] [font‑variant‑numeric] [font‑variant‑alternates] [font‑variant‑ligatures] [font‑variant‑east‑asian]
font-variant-caps
normalunicasetitling-capssmall-capspetite-capsall-small-capsall-petite-caps
font-variant-east-asian
normaljis78jis83jis90jis04simplifiedtraditionalfull-widthproportional-widthruby
font-variant-emoji
autotextemojiunicode
font-variant-ligatures
normalnonecommon-ligaturesno-common-ligaturesdiscretionary-ligaturesno-discretionary-ligatureshistorical-ligaturesno-historical-ligaturescontextualno-contextual
font-variant-numeric
normalordinalslashed-zerolining-numsoldstyle-numsproportional-numstabular-numsdiagonal-fractionsstacked-fractions
font-variant-position
normalsubsuper
font-weight
normalboldlighterbolder900800700600500400300200100
footnote-display
normalsubsuper
footnote-policy
autolineblock
forced-color-adjust
autonone
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.
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]
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]
grid-auto-columns
automin-contentmax-content<percentage><length><flex length>minmax(min, max)fit-content()
Examples using multiple track-size values:
min-content max-content auto;<length> <length> <length><percentage> <percentage><flex length> <flex length> <flex length>minmax(min, max) minmax(min, max) minmax(min, max)<length> minmax(min, max) <percentage> <flex length> fit-content()
grid-auto-flow
rowcolumndenserow densecolumn dense
grid-auto-rows
automin-contentmax-content<percentage><length><flex length>minmax(min, max)fit-content()
Examples using multiple track-size values:
min-content max-content auto;<length> <length> <length><percentage> <percentage><flex length> <flex length> <flex length>minmax(min, max) minmax(min, max) minmax(min, max)<length> minmax(min, max) <percentage> <flex length> fit-content()
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]
grid-column-end
This is a shorthand property that accepts one or two values, separated by a slash, that represent:
grid-column-start
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]
grid-row-end
grid-row-start
grid-template
This is a shorthand property. Values represent:
[grid‑template‑columns] [grid‑template‑rows] [grid‑template‑areas]
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.
grid-template-columns
noneauto<length> <flex length><custom identifier> <length><custom identifier> <length> <custom identifier> <custom identifier>minmax(min, max)max-contentmin-contentfit-content(<length>)fit-content(<percentage>)repeat()subgridmasonry
Examples using auto-track-list values:
grid-template-rows
noneauto<length> <flex length><custom identifier> <length><custom identifier> <length> <custom identifier> <custom identifier>minmax(min, max)max-contentmin-contentfit-content(<length>)fit-content(<percentage>)repeat()subgridmasonry
Examples using auto-track-list values:
hanging-punctuation
nonefirstlastforce-endallow-endlast force-endfirst allow-end last
Two or three keywords can be mixed and matched.
height
auto<percentage><length>min-contentmax-contentfit-content(<percentage>)fit-content(<length>)
hyphens
manualnoneauto
Browser support below is for English. For support in other languages, see hyphens on caniuse.com.
image-orientation
image-rendering
autosmoothhigh-qualitycrisp-edgespixelated
image-resolution
1dppx<resolution><resolution> snapfrom-imagefrom-image snap
initial-letter
initial-letter-align
alphabeticborder-boxideographichebrewhanging
initial-letter-wrap
nonefirstallgrid<length><percentage>
inline-size
auto<length><percentage>max-contentmin-contentavailablefit-content<length> border-box<percentage> content-box
inline-sizing
normalstretch
inset
This is a shorthand property. Values represent:
[top] [right] [bottom] [left]
inset-block
This is a shorthand property. Values represent:
[inset‑block‑start] [inset‑block‑end]
inset-block-end
auto<length><percentage>
inset-block-start
auto<length><percentage>
inset-inline
This is a shorthand property. Values represent:
[inset‑inline‑start] [inset‑inline‑end]
inset-inline-end
auto<length><percentage>
inset-inline-start
auto<length><percentage>
isolation
autoisolate
justify-content
For flexbox:
flex-startspace-betweenspace-aroundflex-endcenter
For grid layout:
normalspace-betweenspace-aroundspace-evenlystretchcentercenter safecenter unsafeleftrightbaselinefirst baselinelast baseline
Part of Box Alignment Module. The safe and unsafe keywords are optional and can be used alongside any alignment keyword.
justify-items
legacynormalstretchleftrightcenterlegacy leftlegacy rightlegacy centerbaselinefirst baselinelast baselinesafe centerunsafe centerstartendself-startself-endflex-startflex-start
The safe and unsafe keywords are optional and can be used alongside any alignment keyword.
justify-self
autonormalstretchleftrightcenterbaselinefirst baselinelast baselinesafe centerunsafe centerstartendself-startself-endflex-startflex-start
The safe and unsafe keywords are optional and can be used alongside any alignment keyword.
left
auto<percentage><length>
Applies to positioned elements.
letter-spacing
normal<length>
lighting-color
white<color>
line-break
autostrictnormallooseanywhere
line-clamp
none<integer>
Browsers are required to support the vendor-specific -webkit-line-clamp property as an alias for this property.
line-grid
This is a shorthand property. Values represent:
match-parentcreate
line-height
normal<percentage><number><length>
line-padding
0<length>
line-snap
nonebaselinecontain
list-style
This is a shorthand property. Values represent:
[list‑style‑position] [list‑style‑image] [list‑style‑type]
list-style-image
noneurl("path/file.png")<radial-gradient><linear-gradient><conic-gradient><repeating-gradient>
list-style-position
outsideinside
list-style-type
discnonecirclesquaredecimal<string>symbols()cjk-decimaldecimal-leading-zerolower-romanupper-romanlower-greeklower-alphalower-latinupper-alphaupper-latinarabic-indicarmenianbengalicambodiancjk-earthly-branchcjk-heavenly-stemcjk-ideographicdevanagariethiopic-numericgeorgiangujaratigurmukhihebrewhiraganahiragana-irohajapanese-formaljapanese-informalkannadakatakanakatakana-irohakhmerkorean-hangul-formalkorean-hanja-formalkorean-hanja-informallaolower-armenianmalayalammongolianmyanmaroriyapersiansimp-chinese-formalsimp-chinese-informaltamilteluguthaitibetantrad-chinese-formaltrad-chinese-informalupper-armeniandisclosure-opendisclosure-closedkhmerkhmerkhmer
margin
This is a shorthand property. Values represent:
[margin‑top] [margin‑right] [margin‑bottom] [margin‑left]
margin-block
This is a shorthand property that accepts one to three space-separated values.
[margin‑block‑start] [margin‑block‑end]
margin-block-end
This is a shorthand property that accepts one to four space-separated values.
[margin‑top] [margin‑left] [margin‑bottom] [margin‑right]
margin-block-start
This is a shorthand property that accepts one to four space-separated values.
[margin‑top] [margin‑left] [margin‑bottom] [margin‑right]
margin-bottom
0auto<percentage><length>
margin-break
autokeepdiscard
margin-inline
This is a shorthand property that accepts one or two space-separated values.
[margin‑inline‑start] [margin‑inline‑end]
margin-inline-end
This is a shorthand property that accepts one to four space-separated values.
[margin‑top] [margin‑left] [margin‑bottom] [margin‑right]
margin-inline-start
This is a shorthand property that accepts one to four space-separated values.
[margin‑top] [margin‑left] [margin‑bottom] [margin‑right]
margin-left
0auto<percentage><length>
margin-right
0auto<percentage><length>
margin-top
0auto<percentage><length>
margin-trim
nonein-flowall
mask
This is a shorthand property. Values represent:
[mask‑clip] [mask‑composite] [mask‑image] [mask‑mode] [mask‑origin] [mask‑position] [mask‑repeat] [mask‑size]
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]
mask-border-mode
alphaluminance
mask-border-repeat
Accepts one or two space-separated values.
stretchrepeatroundspacestretch spacerepeat round
mask-border-slice
Accepts one to four space separated values and an optional keyword.
mask-border-source
noneurl("path/file.png")<radial-gradient><linear-gradient><conic-gradient><repeating-gradient>element()image()image-set()cross-fade()
mask-border-width
Accepts one to four space separated values.
mask-clip
border-boxcontent-boxpadding-boxfill-boxstroke-boxview-boxno-clip
Accepts one or more comma-separated mask-clip layers (i.e. similar to layered multiple backgrounds).
mask-composite
addsubtractintersectexclude
Accepts one or more comma-separated mask-composite layers (i.e. similar to layered multiple backgrounds).
mask-image
noneurl("path/file.png")<radial-gradient><linear-gradient><conic-gradient><repeating-gradient>element()image()image-set()cross-fade()
Accepts one or more comma-separated mask-image layers (i.e. similar to layered multiple backgrounds).
mask-mode
Accepts one to four space separated values.
match-sourcealphaluminance
Accepts one or more comma-separated mask-mode layers (i.e. similar to layered multiple backgrounds).
mask-origin
border-boxcontent-boxpadding-boxfill-boxstroke-boxview-box
Accepts one or more comma-separated mask-origin layers (i.e. similar to layered multiple backgrounds).
mask-position
0% 0%topbottomleftrightcenterright bottomleft topcenter center<percentage> <length>
Accepts one or more comma-separated mask-position layers (i.e. similar to layered multiple backgrounds).
mask-repeat
repeatno-repeatspaceroundrepeat-yrepeat-xrepeat no-repeatround roundspace space
Accepts one or more comma-separated mask-repeat layers (i.e. similar to layered multiple backgrounds).
mask-size
autoauto autocovercontainauto <percentage><percentage> <length><percentage><length> auto<length> <percentage><length>
Accepts one or more comma-separated mask-size layers (i.e. similar to layered multiple backgrounds).
mask-type
luminancealpha
max-block-size
none<percentage><length>
max-height
none<percentage><length>min-contentmax-contentfit-content(<percentage>)fit-content(<length>)
max-lines
none<integer>
max-width
none<percentage><length>min-contentmax-contentfit-content(<percentage>)fit-content(<length>)
min-height
auto<percentage><length>min-contentmax-contentfit-content(<percentage>)fit-content(<length>)
min-width
auto<percentage><length>min-contentmax-contentfit-content(<percentage>)fit-content(<length>)
mix-blend-mode
normalmultiplyscreenoverlaydarkenlightencolor-dodgecolor-burnhard-lightsoft-lightdifferenceexclusionhuesaturationcolorluminosity
object-fit
fillnonecoverscale-downcontain scale-downcover scale-down
object-position
50% 50%topbottomleftrightcenterright bottomleft topcenter center<percentage> <length>
Keywords represent horizontal offsets (left, center, right) and vertical offsets (top, center, bottom), and can be mixed and matched.
offset
This is a shorthand property. Values represent:
[offset‑position] [offset‑path] [offset‑distance] [offset‑rotate] [offset‑anchor]
offset-anchor
autotopbottomleftrightcenterright bottomleft topcenter center<percentage> <length>
Keywords represent horizontal offsets (left, center, right) and vertical offsets (top, center, bottom), and can be mixed and matched.
offset-distance
Keywords represent horizontal offsets (left, center, right) and vertical offsets (top, center, bottom), and can be mixed and matched.
offset-path
noneray()path()url("path/file.svg")content-boxpadding-boxborder-boxpadding-boxfill-boxstroke-boxview-box<basic-shape> content-box<basic-shape> padding-box<basic-shape> border-box<basic-shape> fill-box<basic-shape> stroke-box<basic-shape> view-box
offset-position
autotopbottomleftrightcenterright bottomleft topcenter center<percentage> <length>
Keywords represent horizontal offsets (left, center, right) and vertical offsets (top, center, bottom), and can be mixed and matched.
offset-rotate
autoreverse<angle>
opacity
order
orphans
Part of CSS paged media.
outline
This is a shorthand property. Values represent:
[outline‑color] [outline‑style] [outline‑width]
outline-color
currentColor<color>invert
Modern browsers do not support the invert keyword, which is assigned as the initial value in the spec.
outline-offset
0<length>
outline-style
noneautodotteddashedsoliddoublegrooveridgeinsetoutset
outline-width
mediumthinthick<length>
overflow
This is a shorthand property that accepts one or two space separated values representing:
[overflow‑x] [overflow‑y]
overflow-anchor
autonone
overflow-block
visiblehiddenclipscrollauto
Corresponds to overflow-y.
overflow-clip-margin
0px<length>
overflow-inline
visiblehiddenclipscrollauto
Corresponds to overflow-x.
overflow-wrap
normalbreak-wordanywhere
Deeper browser support is possible by using the alternate syntax word-wrap.
overflow-x
visiblehiddenclipscrollauto
overflow-y
visiblehiddenclipscrollauto
overscroll-behavior
This is a shorthand property. Values represent:
[overscroll‑behavior‑x] [overscroll‑behavior‑y]
overscroll-behavior-block
autocontainnone
overscroll-behavior-inline
autocontainnone
overscroll-behavior-x
autocontainnone
overscroll-behavior-y
autocontainnone
padding
This is a shorthand property that accepts 1 to 4 space-separated values representing:
[padding‑top] [padding‑right] [padding‑bottom] [padding‑left]
padding-block
This is a shorthand property that accepts one or two space-separated values representing:
[padding‑block‑start] [padding‑block‑end]
padding-block-end
padding-block-start
padding-bottom
padding-inline
This is a shorthand property that accepts one or two space-separated values representing:
[padding‑inline‑start] [padding‑inline‑end]
padding-inline-end
padding-inline-start
padding-left
padding-right
padding-top
page
auto<custom identifier>
page-break-after
autoalwaysavoidleftright
This property has been replaced by break-after.
page-break-before
autoalwaysavoidleftright
This property has been replaced by break-before.
page-break-inside
autoavoid
This property has been replaced by break-inside.
page-orientation
uprightrotate-leftrotate-right
Can be used only inside an @page rule.
perspective
none<length>
perspective-origin
50% 50%topbottomleftrightcenterright bottomleft topcenter center<percentage> <length>
Keywords represent horizontal offsets (left, center, right) and vertical offsets (top, center, bottom), and can be mixed and matched.
place-content
This is a shorthand property. Values represent:
[align‑content] [justify‑content]
place-items
This is a shorthand property. Values represent:
[align‑items] [justify‑items]
place-self
This is a shorthand property. Values represent:
[align‑self] [justify‑self]
pointer-events
autonone
The spec defines eight other values that apply only to SVG elements.
position
staticrelativeabsolutestickyfixed
quotes
Used along with :before and :after pseudo-elements.
resize
nonebothhorizontalvertical
New values:
blockinline
Requires the element's overflow property to be set to something other than visible, or else must be a replaced element.
right
auto<percentage><length>
Applies to positioned elements.
rotate
row-gap
normal<length><percentage>
The legacy grid-row-gap property is now an alias for this property and has the same browser support.
scale
Numbers represent values for the x, y, and z axes.
scroll-behavior
autosmooth
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]
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]
scroll-margin-block-end
0<length>
scroll-margin-block-start
0<length>
scroll-margin-bottom
0<length>
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]
scroll-margin-inline-end
0<length>
scroll-margin-inline-start
0<length>
scroll-margin-left
0<length>
scroll-margin-right
0<length>
scroll-margin-top
0<length>
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]
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]
scroll-padding-block-end
scroll-padding-block-start
scroll-padding-bottom
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]
scroll-padding-inline-end
scroll-padding-inline-start
scroll-padding-left
scroll-padding-right
scroll-padding-top
scroll-snap-align
nonestartendcenterstart endend center
scroll-snap-stop
normalalways
scroll-snap-type
nonexyblockinlinebothx mandatoryblock proximity
The mandatory and proximity keywords are optional and can follow any of the other keyword values.
scrollbar-color
scrollbar-gutter
autostablealwaysstable both forcealways both force
scrollbar-width
autothinnone
shape-image-threshold
0x<length><percentage>
shape-inside
autooutside-shapedisplayinset()circle()ellipse()polygon()polygon() shape-boxpath()url("path/file.svg")<radial-gradient><linear-gradient><conic-gradient><repeating-gradient>
shape-margin
shape-outside
nonemargin-boxborder-boxpadding-boxcontent-boxinset() border-boxinset()circle()ellipse()polygon()path()url("path/file.svg")<radial-gradient><linear-gradient><conic-gradient><repeating-gradient>
Any shape function can be mixed with any *-box keywords.
shape-padding
none<length>
string-set
tab-size
table-layout
autofixed
Applies to HTML table elements.
text-align
startendleftrightcenterjustifymatch-parentjustify-all
text-align-all
startendleftrightcenterjustifymatch-parent
text-align-last
autostartendleftrightcenterjustifymatch-parent
text-combine-upright
nonealldigitsdigits <integer>
text-decoration
This is a shorthand property. Values represent:
[text‑decoration‑line] [text‑decoration‑thickness] [text‑decoration‑style] [text‑decoration‑color]
text-decoration-color
text-decoration-line
noneunderlineoverlineline-throughblinkunderline overlineunderline line-through blinkunderline overline line-through blinkspelling-errorgrammar-error
The first four keywords can be mixed and matched up to four times.
text-decoration-skip
noneauto
text-decoration-style
soliddoubledotteddashedwavy
text-decoration-thickness
autofrom-font<length><percentage>
text-emphasis
This is a shorthand property. Values represent:
[text‑emphasis‑style] [text‑emphasis‑color]
text-emphasis-position
over rightover allunder rightunder all
text-emphasis-style
nonefilledopendotcircledouble-circletrianglesesamefilled circleopen sesame<string>
The filled and open keywords can be used alongside any of the other keywords.
text-group-align
nonestartendleftrightcenter
text-indent
0<length><percentage><length> hanging<length> each-line<percentage> hanging<percentage> each-line<length> hanging each-line<percentage> hanging each-line
text-justify
autononeinter-wordinter-character
text-orientation
mixeduprightsideways
text-overflow
clipellipsis<string>fadefade(<length>)fade(<percentage>)
text-rendering
autooptimizeSpeedoptimizeLegibilitygeometricPrecision
This is an SVG property that is also supported in many browsers on HTML elements.
text-shadow
The <length> values are horizontal offset, vertical offset, and blur. Multiple shadows are applied by comma-separating value sets.
text-size-adjust
autonone<percentage>
text-space-trim
nonetrim-innerdiscard-beforediscard-after
text-spacing
normalnoneautotrim-startspace-startspace-firsttrim-endspace-endallow-endtrim-adjacentspace-adjacentno-compressideograph-alphaideograph-numericpunctuationtrim-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.
text-transform
nonecapitalizeuppercaselowercasecapitalizefull-widthfull-size-kana
text-underline-offset
auto<length><percentage>
text-underline-position
autofrom-fontunderleftrightfrom-font leftfrom-font rightunder leftunder right
text-wrap
wrapnowrapbalancestablepretty
top
auto<percentage><length>
Applies to positioned elements.
touch-action
autononepan-xpan-leftpan-rightpan-ypan-uppan-downmanipulation
transform
nonematrix()matrix3d()translate()translateX()translateY()translate3d()translateZ()scale()scaleX()scaleY()scaleZ()rotate()rotate3d()rotateX()rotateY()rotateZ()perspective()skew()skewX()skewY()
Accepts multiple space-separated transform functions.
transform-box
view-boxcontent-boxborder-boxfill-boxstroke-box
transform-origin
50% 50%toprightleftcenterbottom<percentage><length>bottom <percentage> <length>
Can be up to three space-separated values (keywords or values) representing X, Y, and Z offsets.
transform-style
flatpreserve-3d
Part of 3D transforms.
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.
transition-delay
0s<time>
Multiple delays are defined by comma-separating values.
transition-duration
0s<time>
Multiple durations are defined by comma-separating values.
transition-property
allnonecolorcolor, border-bottom
Can be any valid animatable CSS property. Multiple transition properties are defined by comma-separating values.
transition-timing-function
easelinearstep-startstep-endease-inease-outease-in-outsteps(<integer>)steps(<integer>, start)steps(<integer>, end)steps(<integer>, jump-start)steps(<integer>, jump-end)steps(<integer>, jump-none)steps(<integer>, jump-both)cubic-bezier(<number>, <number>, <number>, <number>)
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.
translate
none<length><percentage>
Accepts one to three space-separated values representing the X, Y, and Z axes.
unicode-bidi
normalembedisolatebidi-overrideisolate-overrideplaintext
user-select
autotextnonecontainall
vertical-align
baselinetopmiddlebottomsubsupertext-toptext-bottom<length><percentage>
The first four values render differently when applied to table cells.
visibility
visiblehiddencollapse
white-space
normalprenowrappre-wrappre-line
widows
Part of CSS paged media.
width
automin-contentmax-contentfit-content(<length>)fit-content(<percentage>)<percentage><length>
will-change
autoscroll-positioncontentstransformtop, width
The last two examples above can be any valid animatable CSS property or comma-separated list of properties
word-break
normalkeep-allbreak-allbreak-word
word-spacing
normal<length>
word-wrap
normalbreak-word
This is now an alias for overflow-wrap but has deeper browser support and doesn't accept the anywhere keyword value.
wrap-after
autoavoidavoid-lineavoid-flexlineflex
wrap-before
autoavoidavoid-lineavoid-flexlineflex
wrap-flow
autobothstartendminimummaximumclear
wrap-inside
autoavoid
wrap-through
wrapnone
writing-mode
horizontal-tbvertical-rlvertical-lrsideways-rlsideways-lr
z-index
auto<integer>
Applies to positioned elements.
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, andunsetare omitted to avoid repetition.