This is a shorthand property that resets all CSS properties. Value can be one of the following:
initialunsetinheritSince this affects all properties, this property does not have an initial value.
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.
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.
ltrrtlnormalreversealternate-reversealternateAccepts a comma-separated list of direction values to correspond to the animations identified in animation-name and the matching @keyframes at-rules.
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.
noneforwardsbothbackwardsAccepts a comma-separated list of fill mode values to correspond to the animations identified in animation-name and the matching @keyframes at-rules.
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.
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 by the developer, similar to how variable or function names are defined in JavaScript. This custom identifier must match an identifier used in an @keyframes at-rule.
easesteps(<integer>, start)steps(<integer>, end)step-startstep-endlinearease-outease-in-outease-incubic-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.
runningpausedAccepts a comma-separated list of play state values to correspond to the animations identified in animation-name and the matching @keyframes at-rules.
visiblehiddencollapsevisiblehiddenThis 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.
scrolllocalfixedIf multiple background images are defined, multiple background-attachment values are declared by comma-separating the values. The value "local" is supported everywhere including IE9+ and Firefox 25+.
normalsoft-lightscreensaturationoverlaymultiplyluminositylightenhuehard-lightexclusiondifferencedarkencolor-dodgecolor-burncolor[ initial value depends on the user agent ]<color>transparent<color>This property is now deprecated but is still required to work in all browsers. The clip-path property replaces it. Applies only to absolutely positioned elements. The lengths can also be <percentage> values.
noneview-boxstroke-boxfill-box<url><shape-box><basic-shape>This replaces the now-deprecated clip property.
border-boxpadding-boxcontent-boxIf multiple background images are defined, multiple background-clip values are declared by comma-separating the values.
noneurl("path/file.png")<repeating-gradient><radial-gradient><linear-gradient><image-function>Multiple background images are defined using comma-separated values. URLs can be defined without quotes.
padding-boxcontent-boxborder-boxThis property has no effect on background images that have their background-attachment property set to "fixed".
staticstickyrelativepagefixedcenterabsolute0% 0%right 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.
repeatspaceroundrepeat-yrepeat-xrepeat no-repeatno-repeatCan 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.
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.
This is a shorthand property. Values represent:
[border-width] [border-style] [border-color]Note that this shorthand property will reset border-image values to their initial values.
separatecollapseThis is a shorthand property that accepts one to four space-separated values.
<currentColor>transparent<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.
auto<percentage><length>Applies to positioned elements.
This is a shorthand property. Values represent:
[border-width] [border-style] [border-color]<currentColor>transparent<color>auto<percentage><length>Applies to positioned elements.
This is a shorthand property. Values represent:
[border-width] [border-style] [border-color]This is a shorthand property. Values represent:
<currentColor>transparent<color>auto<percentage><length>Applies to positioned elements.
This is a shorthand property. Values represent:
[border-width] [border-style] [border-color]This is a shorthand property. Values represent:
<currentColor>transparent<color>auto<percentage><length>Applies to positioned elements.
This is a shorthand property. Values represent:
[border-width] [border-style] [border-color]<currentColor>transparent<color>This is a shorthand property.
Length values can be mixed with percentage values. When using the "slash" syntax, up to four values can be used before and after the slash. Values before the slash set the horizontal radii while values after the slash set the vertical radii. If 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.
This is a shorthand property. Values represent:
[border-image-source] [border-image-slice] / [border-image-width] [border-image-width] / [border-image-outset] [border-image-repeat]noneurl("path/file.png")100%[ Up to four space-separated <number> or <percentage> values; the optional 'fill' keyword can be included after the other values are declared ]auto<percentage><length>1[ Up to four space-separated <length>, <percentage>, or <number> values for top, right, bottom, and left; one or more values can be 'auto' ]0[ Up to four space-separated <length> or <number> values defining outsets for top, right, bottom, and left sides ]stretchspaceroundrepeatCan be two space-separated values representing horizontal and vertical repeating.
Applies to table cells. If two values are declared, the first value is the horizontal spacing and second is vertical.
This is a shorthand property that accepts one to four values.
nonesolidridgeoutsetinsethiddengroovedoubledotteddashedWhen 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.
nonesolidridgeoutsetinsethiddengroovedoubledotteddashednonesolidridgeoutsetinsethiddengroovedoubledotteddashednonesolidridgeoutsetinsethiddengroovedoubledotteddashednonesolidridgeoutsetinsethiddengroovedoubledotteddashedThis is a shorthand property that accepts one to four values.
mediumthinthick<length>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.
mediumthinthick<length>mediumthinthick<length>mediumthinthick<length>mediumthinthick<length>slicecloneThe "inset" keyword is optional. The <length> values are horizontal offset, vertical offset, blur and spread. Multiple shadows are applied by comma-separating value sets.
content-boxpadding-boxborder-boxFirefox is the only browser that supports the padding-box value.
autorightpageleftcolumnavoid-pageavoid-columnavoidalwaysPart of CSS multiple columns.
autorightpageleftcolumnavoid-pageavoid-columnavoidalwaysPart of CSS multiple columns.
autoavoid-pageavoid-columnavoidPart of CSS multiple columns.
topbottomApplies to caption elements on HTML tables. Firefox additionally supports the non-standard "left" and "right" values.
nonerightleftbothnonetopstartrightoutsideleftinsideenddescendantsbottombothbalanceautoPart of CSS multiple columns.
noneallPart of CSS multiple columns.
auto<length>Part of CSS multiple columns.
auto<integer>Part of CSS multiple columns.
normal<length>Part of CSS multiple columns.
This is a shorthand property. Values represent:
[column-rule-width] [column-rule-style] [column-rule-color]Part of CSS multiple columns.
[ Initial value depends on the user agent ]<color>Part of CSS multiple columns.
nonesolidridgeoutsetinsethiddengroovedoubledotteddashedPart of CSS multiple columns.
mediumthinthick<length>Part of CSS multiple columns.
This is a shorthand property. Values represent:
[column-width] [column-count]Part of CSS multiple columns.
normalopen-quotenoneno-open-quoteno-close-quoteiconclose-quoteattr(<identifier><url><string><counter>Applies to :before and :after pseudo-elements.
none<identifier> <integer>Part of CSS counters.
none<identifier> <integer>Part of CSS counters.
autozoom-outzoom-inwaitw-resizevertical-texturl("path/file.png")textsw-resizese-resizes-resizerow-resizeprogresspointernwse-resizenw-resizens-resizenot-allowednoneno-dropnesw-resizene-resizen-resizemovehelpew-resizee-resizedefaultcrosshaircopycontext-menucol-resizecellall-scrollaliasNot applicable to mobile browsers. See the MDN link for full details. A URL value can take optional x and y <number> coordinates.
inlinetable-row-grouptable-rowtable-header-grouptable-footer-grouptable-column-grouptable-columntable-celltable-captiontablerun-inrun-innonelist-iteminline-tableinline-flexinline-blockflexcontainercompactblockAlso accepts ruby-specific values. Support for newer values might vary (e.g. depending on support for flexbox or table-based display features).
showhidenonerightleftThis is a shorthand property. The first value shows the represented properties:
[flex-grow] [flex-shrink] [flex-basis]nonePart of flexbox.
auto<length>Part of flexbox.
rowrow-reversecolumn-reversecolumnPart of flexbox.
This is a shorthand property. Values represent:
[flex-direction] [flex-wrap]Part of flexbox.
0<number>Part of flexbox.
1<number>Part of flexbox.
nowrapwrap-reversewrapPart of flexbox.
stretchflex-startflex-endcenterbaselinePart of flexbox.
autostretchflex-startflex-endcenterbaselinePart of flexbox.
stretchspace-betweenspace-aroundflex-startflex-endcenterPart of flexbox.
flex-startspace-betweenspace-aroundflex-endcenterPart of flexbox.
nonesepia(<number> | <percentage>)saturate(<number> | <percentage>)opacity(<number> | <percentage>)invert(<number> | <percentage>)hue-rotate(<angle>)grayscale(<number> | <percentage>)drop-shadow(<length> <color>)contrast(<number> | <percentage>)brightness(<number> | <percentage>)blur(<length>)<url>This is a shorthand property. Values represent:
[font-style] [font-variant] [font-weight] [font-stretch] [font-size] / [line-height] [font-family]For info on the order of values, mandatory values, etc., see this cheat sheet.
[ Initial value depends on the user agent ]<family-name>Font stacks are created by comma-separating font names. A final <generic-family> is recommended.
normal<feature-tag-value>mediumxx-smallxx-largex-smallx-largesmallersmalllargerlarge<percentage><length>normalultra-expandedultra-condensedsemi-expandedsemi-condensedextra-expandedextra-condensedexpandedcondensednone<number>weight styleweightstylenoneautonormalnonenormalunicasetitling-capssmall-capspetite-capsall-small-capsall-petite-capsThis property is now a shorthand covering a number of font feature properties. Not all possible values are shown here.
normalunicasetitling-capssmall-capspetite-capsall-small-capsall-petite-capsnormalobliqueitalicnormallighterbolderbold900800700600500400300200100nonelast force-endlast allow-endlastforce-endfirst force-endfirst allow-endfirstallow-endauto<percentage><length>manualnoneautoBrowser support has a number of quirks and exceptions. See MDN link for details.
autopixelatedcrisp-edges1dppxsnapfrom-imageAlso accepts an optional "snap" keyword.
autoisolatenormal<length>Can be up to three values representing optimum, minimum, and maximum spacing. If two values are used, the first represents optimum and minimum. If one value is used, it represents all three.
autostrictnormalloosenormal<percentage><number><length>This is a shorthand property. Values represent:
[list-style-type] [list-style-position] [list-style-image]Applies to HTML list elements.
none<url>Applies to HTML list elements.
outsideinsideApplies to HTML list elements.
discupper-romanupper-latinupper-alphasquarenonelower-romanlower-latinlower-greeklower-alphageorgiandecimal-leading-zerodecimalcirclearmenianApplies to HTML list elements.
This is a shorthand property. Values represent:
[margin-top] [margin-right] [margin-bottom] [margin-left]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.
0auto<percentage><length>0auto<percentage><length>0auto<percentage><length>0auto<percentage><length>luminancealphanone<percentage><length>none<percentage><length>0auto<percentage><length>0auto<percentage><length>normalsoft-lightscreensaturationoverlaymultiplyluminositylightenhuehard-lightexclusiondifferencedarkencolor-dodgecolor-burncolorfillscale-downnonecovercontain50% 50%right bottomleft topcenter center<percentage> <length>Keywords represent horizontal offsets (left, center, right) and vertical offsets (top, center, bottom), and can be mixed and matched.
1<number>The same feature can be emulated in IE6-8 using non-standard filters. See this post for details.
Part of CSS paged media.
This is a shorthand property. Values represent:
[outline-color] [outline-style] [outline-width]invert<color>Support for the invert keyword is sketchy. See MDN link for details.
0<length>nonesolidridgeoutsetinsetgroovedoubledotteddashedautomediumthinthick<length>visiblescrollhiddenautovisiblescrollhiddenautovisiblescrollhiddenautonormalbreak-wordFull browser support is attained by using the alternate syntax word-wrap.
This is a shorthand property. Values represent:
[padding-top] [padding-right] [padding-bottom] [padding-left]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.
autorightleftavoidalwaysPart of CSS paged media.
autorightleftavoidalwaysPart of CSS paged media.
autoavoidPart of CSS paged media.
none<length>Part of 3D transforms.
50% 50%toprightleftcenterbottom<percentage><length>Part of 3D transforms. Can be up to two space-separated values, for horizontal and vertical offsets.
autononeThe spec defines eight other values that apply only to SVG elements.
Used along with :before and :after pseudo-elements.
noneverticalhorizontalbothautosmoothSupport in Chrome and Opera available behind a user-enabled flag.
noneright bottommargin-boxleft centerborder-box<percentage> <length>Can include optionally one of border-box and margin-box. Takes comma-separated 2-value sets of lengths, percentages, position keywords, etc.
0px 0pxtop bottomleft rightcenter center<length> <percentage>noneproximitymandatoryautofixedApplies to HTML table elements.
[ Initial value depends on the writing direction (ltr or rtl) ]start endstartrightmatch-parentleftjustifyendcenter<string>The <string> value must be a single character.
autostartrightleftjustifyendcenternonedigits <integer>allWebKit browsers have support with vendor prefix using older syntax of -webkit-text-combine
This is a shorthand property. Values represent:
[text-decoration-line] [text-decoration-style] [text-decoration-color]noneunderlineoverlineline-throughblinkAllows multiple values to be applied to a single element by space-separating the values. The "blink" value is now deprecated in favor of CSS animations for the same effect.
nonespacesobjectsinkedgesbox-decorationAllows multiple values to be applied to a single element by space-separating the values.
solidwavydoubledotteddashedThis is a shorthand property. Values represent:
[text-emphasis-style] [text-emphasis-color]This shorthand does not include text-emphasis-position
nonetrianglesesameopenfilleddouble-circledotcircle<string>The values "filled" and "open" can be combined with any one of the remaining values except "none".
over rightover leftbelow rightbelow left0<percentage><length> hanging each-line<length> hanging<length> each-line<length>Where <length> is specified along with one or more optional keywords, this can be replaced with <percentage>.
autononeinter-worddistributemixeduse-glyph-orientationuprightsideways-rightsideways-leftsidewaysclipellipsis<string>Accepts up to two space-separated values. The two-value syntax has little browser support.
autooptimizeSpeedoptimizeLegibilitygeometricPrecisionThe <length> values are horizontal offset, vertical offset, and blur. Multiple shadows are applied by comma-separating value sets.
autounder rightunder leftunderrightleftautopan-ypan-ypan-xpan-uppan-rightpan-leftpan-downnonemanipulationnonetranslateZ(<length>)translateY(<translation-value>)translateX(<translation-value>)translate3d(<translation-value>, <translation-value>, <length>)translate(<translation-value>, <translation-value>)skewY(<angle>)skewX(<angle>)scaleZ(<number>)scaleY(<number>)scaleX(<number>)scale3d(<number>, <number>, <number>)scale(<number>)rotateZ(<angle>)rotateY(<angle>)rotateX(<angle>)rotate3d(<number>, <number>, <number>, <angle>)rotate(<angle>)perspective(<length>)matrix3d([16 comma-separated <number> values])matrix([<number>, <number>, <number>, <number>, <number>, <number>])border-boxview-boxfill-box50% 50%toprightleftcenterbottom<percentage><length>Can be up to three space-separated values, for horizontal, vertical, and Z position.
flatpreserve-3dPart of 3D transforms.
noneuppercaselowercasefull-widthcapitalizeThe value full-width is supported only in Firefox (desktop and mobile).
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.
allnone[ A comma-separated list of property names ]easesteps(<integer>, start)steps(<integer>, end)steps(<integer>)step-startstep-endlinearease-outease-in-outease-incubic-bezier(<number>, <number>, <number>, <number>)0s<time>normalembedbidi-overridebaselinetoptext-toptext-bottomsupersubmiddlebottom<percentage><length>Applies only to inline elements, not the contents of elements.
normalpre-wrappre-lineprenowrapIE6-7 do not support the values pre-wrap and pre-line.
Part of CSS paged media.
autoscroll-positioncontents[ custom identifier ]normalkeep-allbreak-allnormal<percentage><length>Can be up to three space-separated values representing optimum, minimum, and maximum spacing. If two values are used, the first represents optimum and minimum, and one value represents all three.
normalbreak-wordThis is now an alternate syntax for the equivalent overflow-wrap.
horizontal-tbvertical-rlvertical-lrauto<integer>Applies to positioned elements.
<length>) are linked to the spec, where it describes how they're written.inherit, initial, etc.) are omitted to avoid needless repetition.