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>