content
normalnoneopen-quoteclose-quoteno-open-quoteno-close-quoteattr(<identifier><string><url><counter>icon
- 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.
- 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. - Virtually all CSS properties shown in this reference accept the
inheritkeyword as a value, but it is omitted to avoid needless repetition.
all
This is a shorthand property that resets all CSS properties. Value can be one of the following:
initialdefault
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]
Further info on this property:
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>
Further info on this property:
Accepts a comma-separated list of delay values to correspond to the animations identified in animation-name and the matching @keyframes at-rules.
direction
ltrrtl
animation-direction
normalreversealternatealternate-reverse
Further info on this property:
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>
Further info on this property:
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
noneforwardsbackwardsboth
Further info on this property:
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>
Further info on this property:
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 ]
Further info on this property:
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.
animation-timing-function
easeeaselinearease-inease-outease-in-outstep-startstep-endsteps(<number>, start)steps(<number>, end)cubic-bezier(<number>, <number>, <number>, <number>)
Further info on this property:
Accepts a comma-separated list of timing functions to correspond to the animations identified in animation-name and the matching @keyframes at-rules.
animation-play-state
runningpaused
Further info on this property:
Accepts a comma-separated list of play state values to correspond to the animations identified in animation-name and the matching @keyframes at-rules.
visibility
visiblehiddencollapse
backface-visibility
visiblehidden
background
This is a shorthand property. Values represent:
[background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-clip]
Further info on this property:
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.
background-attachment
scrollfixedlocal
Further info on this property:
If multiple background images are defined, multiple background-attachment values are declared by comma-separating the values.
color
[ initial value depends on the user agent ]<color>
background-color
transparent<color>
clip
Further info on this property:
Applies only to absolutely positioned elements. The lengths can also be <percentage>.
background-clip
border-boxpadding-boxcontent-box
Further info on this property:
If multiple background images are defined, multiple background-clip values are declared by comma-separating the values.
background-image
noneurl("path/file.png")<linear-gradient><radial-gradient><repeating-gradient><image-function>
Further info on this property:
Multiple background images are defined using comma-separated values. URLs can be defined without quotes.
background-origin
border-boxpadding-boxcontent-box
Further info on this property:
This property has no effect on background images that have their background-attachment property set to "fixed".
position
staticrelativeabsolutefixedcenterpage
background-position
0% 0%<percentage> <length>left topcenter centerright bottom
Further info on this property:
If multiple background images are defined, multiple background-position values are defined using comma-separated value pairs. Keywords represent horizontal (left, center, right) and vertical (top, center, bottom) offsets, and can be mixed and matched.
background-repeat
repeatrepeat-xrepeat-yno-repeatspaceroundrepeat no-repeat
Further info on this property:
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
autocovercontain<length><percentage><length> autoauto <percentage><length> <percentage><percentage> <length>
Further info on this property:
If two values are included, the first value is the width and the second is the height.
border
This is a shorthand property. Values represent:
[border-width] [border-style] [border-color]
border-collapse
collapseseparate
border-color
This is a shorthand property that accepts one to four values.
<currentColor><color>transparent
Further info on this property:
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.
top
auto<length><percentage>
Further info on this property:
Applies to positioned elements.
border-top
This is a shorthand property. Values represent:
[border-width] [border-style] [border-color]
border-top-color
<currentColor><color>transparent
right
auto<length><percentage>
Further info on this property:
Applies to positioned elements.
border-right
This is a shorthand property. Values represent:
[border-width] [border-style] [border-color]
border-right-color
<currentColor><color>transparent
bottom
auto<length><percentage>
Further info on this property:
Applies to positioned elements.
border-bottom
This is a shorthand property. Values represent:
[border-width] [border-style] [border-color]
border-bottom-color
<currentColor><color>transparent
left
auto<length><percentage>
Further info on this property:
Applies to positioned elements.
border-left
This is a shorthand property. Values represent:
[border-width] [border-style] [border-color]
border-left-color
<currentColor><color>transparent
border-radius
This is a shorthand property.
Further info on this property:
Length values can be mixed with percentages. 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.
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
border-image
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]
border-image-source
noneurl("path/file.png")
border-image-slice
100%[ Up to four space-separated <number> or <percentage> values; the optional 'fill' keyword can be included after the other values are declared ]
width
auto<length><percentage>
border-image-width
1[ Up to four space-separated <length>, <percentage>, or <number> values for top, right, bottom, and left; one or more values can be 'auto' ]
border-image-outset
border-image-repeat
stretchrepeatroundspace
Further info on this property:
Can be two space-separated values representing horizontal and vertical repeating.
border-spacing
Further info on this property:
Applies to table cells. If two values are declared, the first value is the horizontal spacing and second is vertical.
border-style
This is a shorthand property that accepts one to four values.
nonehiddendotteddashedsoliddoublegrooveridgeinsetoutset
Further info on this property:
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-style
nonehiddendotteddashedsoliddoublegrooveridgeinsetoutset
border-right-style
nonehiddendotteddashedsoliddoublegrooveridgeinsetoutset
border-bottom-style
nonehiddendotteddashedsoliddoublegrooveridgeinsetoutset
border-left-style
nonehiddendotteddashedsoliddoublegrooveridgeinsetoutset
border-width
This is a shorthand property that accepts one to four values.
thinmediumthick<length>
Further info on this property:
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-width
thinmediumthick<length>
border-right-width
thinmediumthick<length>
border-bottom-width
thinmediumthick<length>
border-left-width
thinmediumthick<length>
box-decoration-break
sliceclone
box-shadow
Further info on this property:
The "inset" keyword is optional. The <length> values are horizontal offset, vertical offset, blur and spread. Multiple shadows are applied by comma-separating value sets.
box-sizing
content-boxpadding-boxborder-box
break-before
autoalwaysavoidleftrightpagecolumnavoid-pageavoid-column
Further info on this property:
Part of CSS3 multiple columns.
break-after
autoalwaysavoidleftrightpagecolumnavoid-pageavoid-column
Further info on this property:
Part of CSS3 multiple columns.
break-inside
autoavoidavoid-pageavoid-column
Further info on this property:
Part of CSS3 multiple columns.
caption-side
topbottombeforeafter
clear
noneleftrightboth
clear-after
noneleftrightbothtopbottominsideoutsidestartenddescendants
column-fill
autobalance
Further info on this property:
Part of CSS3 multiple columns.
column-span
noneall
Further info on this property:
Part of CSS3 multiple columns.
column-width
auto<length>
Further info on this property:
Part of CSS3 multiple columns.
column-count
auto<integer>
Further info on this property:
Part of CSS3 multiple columns.
column-gap
normal<length>
Further info on this property:
Part of CSS3 multiple columns.
column-rule
This is a shorthand property. Values represent:
[column-rule-width] [column-rule-style] [column-rule-color]
Further info on this property:
Part of CSS3 multiple columns.
column-rule-color
[ Initial value depends on the user agent ]<color>
Further info on this property:
Part of CSS3 multiple columns.
column-rule-style
nonehiddendotteddashedsoliddoublegrooveridgeinsetoutset
Further info on this property:
Part of CSS3 multiple columns.
column-rule-width
thinmediumthick<length>
Further info on this property:
Part of CSS3 multiple columns.
columns
This is a shorthand property. Values represent:
[column-width] [column-count]
Further info on this property:
Part of CSS3 multiple columns.
counter-increment
none<identifier> <integer>
Further info on this property:
Part of CSS counters.
counter-reset
none<identifier> <integer>
Further info on this property:
Part of CSS counters.
cursor
autodefaultnonecontext-menuhelppointerprogresswaitcellcrosshairtextvertical-textaliascopymoveno-dropnot-allowede-resizen-resizene-resizenw-resizes-resizese-resizesw-resizew-resizeew-resizens-resizenesw-resizenwse-resizecol-resizerow-resizeall-scrollzoom-inzoom-outurl("path/file.png")vertical-text
display
inlineblockflexlist-iteminline-blocktableinline-flexinline-tabletable-row-grouptable-header-grouptable-footer-grouptable-rowtable-column-grouptable-columntable-celltable-captionnone
empty-cells
showhide
Further info on this property:
Applies to table cells.
float
noneleftright
flex
This is a shorthand property. Values represent:
[flex-grow] [flex-shrink] [flex-basis]none
Further info on this property:
Part of CSS3 flex box.
flex-direction
rowrow-reversecolumncolumn-reverse
Further info on this property:
Part of CSS3 flex box.
flex-wrap
nowrapwrapwrap-reverse
Further info on this property:
Part of CSS3 flex box.
flex-flow
This is a shorthand property. Values represent:
[flex-direction] [flex-wrap]
Further info on this property:
Part of CSS3 flex box.
flex-grow
0<number>
Further info on this property:
Part of CSS3 flex box.
flex-shrink
1<number>
Further info on this property:
Part of CSS3 flex box.
flex-basis
auto<length>
Further info on this property:
Part of CSS3 flex box.
justify-content
flex-startflex-endcenterspace-betweenspace-around
Further info on this property:
Part of CSS3 flex box.
align-items
stretchflex-startflex-endcenterbaseline
Further info on this property:
Part of CSS3 flex box.
align-self
autoflex-startflex-endcenterbaselinestretch
Further info on this property:
Part of CSS3 flex box.
align-content
stretchflex-startflex-endcenterspace-betweenspace-around
Further info on this property:
Part of CSS3 flex box.
order
0<number>
Further info on this property:
Part of CSS3 flex box.
font
This is a shorthand property. Values represent:
[font-style] [font-variant] [font-weight] [font-size] / [line-height] [font-family]
Further info on this property:
For info on the order of values, mandatory values, etc., see this cheat sheet.
font-family
[ Initial value depends on the user agent ]<family-name>
Further info on this property:
Font stacks are created by comma-separating font names. A final <generic-family> is recommended.
font-size
<length><percentage>xx-smallx-smallsmallmediumlargex-largexx-largelargersmaller
font-stretch
normalultra-condensedextra-condensedcondensedsemi-condensedsemi-expandedexpandedextra-expandedultra-expanded
font-size-adjust
none<number>
font-synthesis
noneweightstyleweight style
font-kerning
autonormalnone
font-variant
This is a shorthand property. Values include:
normalsmall-capsall-small-capspetite-capsall-petite-capstitling-capsunicase
Further info on this property:
This property is now a shorthand covering a number of font feature properties. Not all possible values are shown here.
font-variant-caps
normalsmall-capsall-small-capspetite-capsall-petite-capstitling-capsunicase
font-style
normalitalicoblique
font-weight
normalboldbolderlighter100200300400500600700800900
hanging-punctuation
nonefirstforce-endallow-endlastfirst force-endfirst allow-endlast force-endlast allow-end
height
auto<length><percentage>
hyphens
manualnoneauto
icon
autoOne or more comma separated <url> values
image-resolution
auto<length><percentage>
image-orientation
0deg<angle>
letter-spacing
normal<length><percentage>
Further info on this property:
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 is used, it represents all three.
line-break
autoloosenormalstrict
line-height
normal<number><length><percentage>none
list-style
This is a shorthand property. Values represent:
[list-style-type] [list-style-position] [list-style-image]
Further info on this property:
Applies to CSS lists.
list-style-image
none<url>
Further info on this property:
Applies to CSS lists.
list-style-position
outsideinside
Further info on this property:
Applies to CSS lists.
list-style-type
disccirclesquaredecimaldecimal-leading-zerolower-romanupper-romanlower-greeklower-latinupper-latinarmeniangeorgianlower-alphaupper-alphanone
Further info on this property:
Applies to CSS lists.
margin
This is a shorthand property. Values represent:
[margin-top] [margin-right] [margin-bottom] [margin-left]
Further info on this property:
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.
margin-left
0<length><percentage>auto
margin-right
0<length><percentage>auto
margin-top
0<length><percentage>auto
margin-bottom
0<length><percentage>auto
max-height
none<length><percentage>
max-width
none<length><percentage>
min-height
0<length><percentage>auto
min-width
0<length><percentage>auto
object-fit
fillcontaincovernonescale-down
object-position
50% 50%<percentage> <length>left topcenter centerright bottom
Further info on this property:
Keywords represent horizontal (left, center, right) and vertical (top, center, bottom) offsets, and can be mixed and matched.
opacity
1<number>
orphans
Further info on this property:
Part of CSS3 paged media.
outline
This is a shorthand property. Values represent:
[outline-color] [outline-style] [outline-width]
outline-color
invert<color>
outline-offset
0<length>
outline-style
noneautodotteddashedsoliddoublegrooveridgeinsetoutset
outline-width
medium<length>thinthick
overflow
visiblehiddenscrollauto
overflow-x
visiblehiddenscrollauto
overflow-y
visiblehiddenscrollauto
overflow-wrap
normalbreak-word
padding
This is a shorthand property. Values represent:
[padding-top] [padding-right] [padding-bottom] [padding-left]
Further info on this property:
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.
padding-top
padding-bottom
padding-left
padding-right
page-break-after
autoalwaysavoidleftright
page-break-before
autoalwaysavoidleftright
Further info on this property:
Part of CSS3 paged media.
page-break-inside
autoavoid
Further info on this property:
Part of CSS3 paged media.
perspective
none<length>
Further info on this property:
Part of CSS3 transforms.
perspective-origin
50% 50%<percentage><length>leftcenterrighttopbottom
Further info on this property:
Part of CSS3 transforms. Can be up to two space-separated values, for horizontal and vertical offsets.
pointer-events
autonone
Further info on this property:
The spec defines 8 other values that apply only to SVG elements.
quotes
Further info on this property:
Used along with :before and :after pseudo-elements.
resize
nonebothhorizontalvertical
tab-size
table-layout
autofixed
Further info on this property:
Applies to HTML tables.
text-align
[ Initial value depends on the writing direction (ltr or rtl) ]leftrightcenterjustify<string>match-parentstartendstart end
Further info on this property:
The <string> value must be a single character.
text-align-last
autostartendleftrightcenterjustify
text-decoration
This is a shorthand property. Values represent:
[text-decoration-line] [text-decoration-style] [text-decoration-color]
text-decoration-line
noneunderlineoverlineline-throughblink
Further info on this property:
Allows multiple space-separated values.
text-decoration-skip
noneobjectsspacesinkedges
Further info on this property:
Allows multiple space-separated values.
text-underline-position
autoalphabeticunderleftrightunder leftunder right
text-decoration-style
soliddoubledotteddashedwavy
text-emphasis
This is a shorthand property. Values represent:
[text-emphasis-style] [text-emphasis-color]
Further info on this property:
This shorthand does not include text-emphasis-position
text-emphasis-style
nonefilledopendotcircledouble-circletrianglesesame<string>
Further info on this property:
The values "filled" and "open" can be combined with any one of the remaining values except "none".
text-emphasis-color
text-emphasis-position
above rightabove leftbelow rightbelow left
text-indent
0<length><percentage><length> hanging<length> each-line<length> hanging each-line
Further info on this property:
Where <length> is specified along with one or more optional keywords, this can be replaced with <percentage>.
text-justify
autononeinter-wordinter-ideographinter-clusterdistributekashida
text-orientation
mixed-rightuprightsideways-rightsideways-leftsidewaysuse-glyph-orientation
text-combine-horizontal
noneall
text-overflow
clipellipsis<string>
transform
nonematrix([<number>, <number>, <number>, <number>, <number>, <number>])translate(<translation-value>, <translation-value>)translateX(<translation-value>)translateY(<translation-value>)scale(<number>)scaleX(<number>)scaleY(<number>)rotate(<angle>)skewX(<angle>)skewY(<angle>)matrix3d([16 comma-separated <number> values])translate3d(<translation-value>, <translation-value>, <length>)translateZ(<length>)scale3d(<number>, <number>, <number>)scaleZ(<number>)rotate3d(<number>, <number>, <number>, <angle>)rotateX(<angle>)rotateY(<angle>)rotateZ(<angle>)perspective(<length>)
transform-origin
50% 50%<percentage><length>leftcenterrighttopbottom
Further info on this property:
Can be up to three space-separated values, for horizontal, vertical, and Z position.
transform-style
flatpreserve-3d
text-transform
nonecapitalizeuppercaselowercasefull-width
text-shadow
Further info on this property:
The <length> values are horizontal offset, vertical offset, and blur. Multiple shadows are applied by comma-separating the sets of values.
transition
This is a shorthand property. Values represent:
[transition-property] [transition-duration] [transition-timing-function] [transition-delay]
Further info on this property:
Accepts a comma-separated list of transitions and their respective values.
transition-property
allnone[ A comma-separated list of property names ]
transition-timing-function
transition-duration
0s<time>
unicode-bidi
normalembedbidi-override
vertical-align
baselinesubsupertoptext-topmiddlebottomtext-bottom<percentage><length>
Further info on this property:
Applies to inline elements.
white-space
normalprenowrappre-wrappre-line
widows
Further info on this property:
Part of CSS3 paged media.
word-break
normalkeep-allbreak-all
word-spacing
normal<length><percentage>
Further info on this property:
Can be up to three values representing optimum, minimum, and maximum spacing. If two values are used, the first represents optimum and minimum, and one value represents all three.
word-wrap
normalbreak-word
Further info on this property:
This property has been replaced by overflow-wrap, but all future browsers will support it as an alternate syntax.
writing-mode
horizontal-tbvertical-rlvertical-lr
z-index
auto<integer>
Further info on this property:
Applies to positioned elements.