Here is a table with CSS properties, possible values, and brief descriptions for each of them:
| Property | Possible Values | Description |
|---|---|---|
align-content | Various values like flex-start, center, flex-end | Aligns flex container content when there’s extra space on the cross-axis. |
align-items | Various values like flex-start, center, flex-end | Aligns flex items on the cross-axis within a flex container. |
align-self | Various values like flex-start, center, flex-end | Aligns a specific flex item on the cross-axis within a flex container. |
all | initial, inherit, unset, revert, display, etc. | Resets all CSS properties to their default values. |
animation | Various values, e.g., animation-name, animation-duration | A shorthand property for animating elements in CSS. |
animation-delay | <time>, initial, inherit, unset | Sets a delay before an animation starts. |
animation-direction | normal, reverse, alternate, alternate-reverse | Sets the direction of an animation sequence. |
animation-duration | <time>, initial, inherit, unset | Defines how long an animation should take to complete. |
animation-fill-mode | none, forwards, backwards, both, initial, inherit, unset | Specifies how styles are applied before and after animation. |
animation-iteration-count | <number>, infinite, initial, inherit, unset | Determines the number of times an animation sequence should be played. |
animation-name | <identifier>, none, initial, inherit, unset | Names the keyframes animation to be applied to the element. |
animation-play-state | paused, running, initial, inherit, unset | Specifies whether an animation is running or paused. |
animation-timing-function | Various values like ease, linear, cubic-bezier() | Sets the timing function for an animation, defining the acceleration curve. |
backdrop-filter | Various values like blur(), brightness(), grayscale(), etc. | Applies graphical effects to the area behind an element. |
backface-visibility | visible, hidden, initial, inherit, unset | Controls whether the back face of an element is visible when transformed in 3D space. |
background | Various properties combined like background-color, background-image, etc. | A shorthand for setting background properties including color, image, position, and more. |
background-attachment | scroll, fixed, local, initial, inherit, unset | Specifies whether the background image scrolls with the content. |
background-blend-mode | Various values like normal, multiply, screen, overlay | Defines how background layers blend together. |
background-clip | border-box, padding-box, content-box, initial, inherit, unset | Specifies which parts of the background are visible within an element’s box. |
background-color | Color values, transparent, initial, inherit, unset | Sets the background color of an element. |
background-image | url('path/to/image.png'), linear-gradient(), radial-gradient(), | Sets one or more background images for an element. |
background-origin | padding-box, border-box, content-box, initial, inherit, unset | Defines where the background image or color starts. |
background-position | Various values like top right, center, 50% 50%, etc. | Specifies the starting position of the background image or color. |
background-repeat | repeat-x, repeat-y, no-repeat, space, round, initial, inherit, unset | Sets how the background image should be repeated. |
background-size | Various values like cover, contain, 100% 100%, etc. | Defines the size of the background image relative to the element’s box. |
block-size | <length>, <percentage>, auto, initial, inherit, unset | Sets the size of a block-level element in the inline direction. |
border | Various properties combined like border-width, border-style, border-color | A shorthand for setting border properties including width, style, and color. |
border-block | Various values for block-level borders like border-block-start, border-block-end | A shorthand for setting block-level border properties. |
border-block-color | Color values, transparent, initial, inherit, unset | Sets the color of block-level borders. |
border-block-end | Various values for block-end border properties like border-block-end-width, border-block-end-style | A shorthand for specifying the style and width of the block-end border. |
border-block-end-color | Color values, transparent, initial, inherit, unset | Sets the color of the block-end border. |
border-block-end-style | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit, unset | Specifies the style of the block-end border. |
border-block-end-width | <length>, thin, medium, thick, initial, inherit, unset | Sets the width of the block-end border. |
border-block-start | Various values for block-start border properties like border-block-start-width, border-block-start-style | A shorthand for specifying the style and width of the block-start border. |
border-block-start-color | Color values, transparent, initial, inherit, unset | Sets the color of the block-start border. |
border-block-start-style | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit, unset | Specifies the style of the block-start border. |
border-block-start-width | <length>, thin, medium, thick, initial, inherit, unset | Sets the width of the block-start border. |
border-block-style | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit, unset | Specifies the style of block-level borders. |
border-block-width | <length>, thin, medium, thick, initial, inherit, unset | Sets the width of block-level borders. |
border-bottom | Various properties combined like border-bottom-width, border-bottom-style, border-bottom-color | A shorthand for setting bottom border properties. |
border-bottom-color | Color values, transparent, initial, inherit, unset | Sets the color of the bottom border. |
border-bottom-left-radius | <length>, initial, inherit, unset | Defines the radius of the bottom-left corner of an element. |
border-bottom-right-radius | <length>, initial, inherit, unset | Defines the radius of the bottom-right corner of an element. |
border-bottom-style | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit, unset | Specifies the style of the bottom border. |
border-bottom-width | <length>, thin, medium, thick, initial, inherit, unset | Sets the width of the bottom border. |
border-collapse | collapse, separate, initial, inherit, unset | Specifies whether table borders should be collapsed into a single border. |
border-color | Color values, transparent, initial, inherit, unset | A shorthand for setting the color of all four borders. |
border-end-end-radius | <length>, initial, inherit, unset | Defines the radius of the end-end corner of an element. |
border-end-start-radius | <length>, initial, inherit, unset | Defines the radius of the end-start corner of an element. |
border-image | <image-source>, initial, inherit, unset | Specifies an image to use for borders instead of the standard border styles. |
border-image-outset | <length>, initial, inherit, unset | Sets the distance between the border image and the border box. |
border-image-repeat | stretch, repeat, round, initial, inherit, unset | Specifies how the border image is repeated. |
border-image-slice | <number>, fill, initial, inherit, unset | Defines the inward offsets of the image border. |
border-image-source | none, <image-source>, initial, inherit, unset | Specifies the source image for the border image. |
border-image-width | <length>, auto, initial, inherit, unset | Sets the width of the border image. |
border-inline | Various values for inline borders like border-inline-start, border-inline-end | A shorthand for setting inline border properties. |
border-inline-color | Color values, transparent, initial, inherit, unset | Sets the color of inline borders. |
border-inline-end | Various values for inline-end border properties like border-inline-end-width, border-inline-end-style | A shorthand for specifying the style and width of the inline-end border. |
border-inline-end-color | Color values, transparent, initial, inherit, unset | Sets the color of the inline-end border. |
border-inline-end-style | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit, unset | Specifies the style of the inline-end border. |
border-inline-end-width | <length>, thin, medium, thick, initial, inherit, unset | Sets the width of the inline-end border. |
border-inline-start | Various values for inline-start border properties like border-inline-start-width, border-inline-start-style | A shorthand for specifying the style and width of the inline-start border. |
border-inline-start-color | Color values, transparent, initial, inherit, unset | Sets the color of the inline-start border. |
border-inline-start-style | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit, unset | Specifies the style of the inline-start border. |
border-inline-start-width | <length>, thin, medium, thick, initial, inherit, unset | Sets the width of the inline-start border. |
border-inline-style | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit, unset | Specifies the style of inline borders. |
border-inline-width | <length>, thin, medium, thick, initial, inherit, unset | Sets the width of inline borders. |
border-left | Various properties combined like border-left-width, border-left-style, border-left-color | A shorthand for setting left border properties. |
border-left-color | Color values, transparent, initial, inherit, unset | Sets the color of the left border. |
border-left-style | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit, unset | Specifies the style of the left border. |
border-left-width | <length>, thin, medium, thick, initial, inherit, unset | Sets the width of the left border. |
border-radius | One to four values like 5px, 10px 20px, initial, inherit, unset | Defines rounded corners for an element. |
border-right | Various properties combined like border-right-width, border-right-style, border-right-color | A shorthand for setting right border properties. |
border-right-color | Color values, transparent, initial, inherit, unset | Sets the color of the right border. |
border-right-style | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit, unset | Specifies the style of the right border. |
border-right-width | <length>, thin, medium, thick, initial, inherit, unset | Sets the width of the right border. |
border-spacing | <length> <length>, initial, inherit, unset | Specifies the distance between adjacent borders of table elements. |
border-start-end-radius | <length>, initial, inherit, unset | Defines the radius of the start-end corner of an element. |
border-start-start-radius | <length>, initial, inherit, unset | Defines the radius of the start-start corner of an element. |
border-style | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit, unset | Specifies the style of all four borders. |
border-top | Various properties combined like border-top-width, border-top-style, border-top-color | A shorthand for setting top border properties. |
border-top-color | Color values, transparent, initial, inherit, unset | Sets the color of the top border. |
border-top-left-radius | <length>, initial, inherit, unset | Defines the radius of the top-left corner of an element. |
border-top-right-radius | <length>, initial, inherit, unset | Defines the radius of the top-right corner of an element. |
border-top-style | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit, unset | Specifies the style of the top border. |
border-top-width | <length>, thin, medium, thick, initial, inherit, unset | Sets the width of the top border. |
border-width | One to four values like 5px, 10px 20px, initial, inherit, unset | Sets the width of all four borders. |
bottom | <length>, <percentage>, auto, initial, inherit, unset | Defines the distance between the bottom edge of the positioned element and the bottom edge of its containing element. |
box-decoration-break | slice, clone, initial, inherit, unset | Controls the rendering of the box-decoration properties. |
box-shadow | <length> <length> <length> <length> <color>, inset, initial, inherit, unset | Adds shadow effects to an element’s box. |
box-sizing | content-box, border-box, initial, inherit, unset | Defines how an element’s total width and height are calculated, including padding and borders. |
caption-side | top, bottom, initial, inherit, unset | Specifies where a table caption should be displayed. |
caret-color | Color values, auto, initial, inherit, unset | Sets the color of the caret (cursor) in an input element. |
clear | none, left, right, both, initial, inherit, unset | Specifies on which sides of an element floating elements should not be allowed. |
clip | auto, rect(top, right, bottom, left), initial, inherit, unset | Specifies what portion of an element is visible. |
clip-path | Various values like url(#path), inset(<length>), circle(<length>), initial, inherit, unset | Clips an element to a basic shape, a path, or an SVG element. |
color | Color values, initial, inherit, unset | Sets the color of the text content. |
column-count | <integer>, auto, initial, inherit, unset | Specifies the number of columns an element should be divided into. |
column-fill | auto, balance, initial, inherit, unset | Controls how content is distributed between columns when the column height is less than the specified column count. |
column-gap | <length>, normal, initial, inherit, unset | Sets the space between columns in a multi-column layout. |
column-rule | Various properties combined like column-rule-width, column-rule-style, column-rule-color | A shorthand for setting the width, style, and color of the rule between columns. |
column-rule-color | Color values, initial, inherit, unset | Sets the color of the rule between columns. |
column-rule-style | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit, unset | Specifies the style of the rule between columns. |
column-rule-width | <length>, thin, medium, thick, initial, inherit, unset | Sets the width of the rule between columns. |
column-span | none, all, initial, inherit, unset | Specifies whether an element should span multiple columns. |
column-width | <length>, auto, initial, inherit, unset | Defines the width of columns in a multi-column layout. |
columns | <length> <length>, auto auto, initial, inherit, unset | A shorthand for setting the width and count of columns in a multi-column layout. |
content | normal, none, counter, attr(), open-quote, close-quote, no-open-quote, no-close-quote, url('path'), initial, inherit, unset | Inserts generated content before or after an element’s content. |
counter-increment | <identifier> <integer>, none, initial, inherit, unset | Increments one or more counters defined with the counter-reset property. |
counter-reset | <identifier> <integer>, none, initial, inherit, unset | Resets one or more counters. |
cursor | Various values like pointer, text, url('cursor.png'), etc. | Specifies the type of cursor to be displayed when hovering over an element. |
direction | ltr, rtl, initial, inherit, unset | Specifies the text direction, either left-to-right or right-to-left. |
display | Various values like block, inline, flex, grid, none, etc. | Defines how an element should be displayed in the document. |
empty-cells | show, hide, initial, inherit, unset | Controls whether empty table cells should be displayed or hidden. |
filter | Various values like blur(), brightness(), grayscale(), etc. | Applies graphical effects to an element’s rendering. |
flex | <integer>, <number>, auto, initial, inherit, unset | A shorthand for specifying the size of a flexible item. |
flex-basis | <length>, auto, initial, inherit, unset | Specifies the initial main size of a flexible item. |
flex-direction | row, row-reverse, column, column-reverse, initial, inherit, unset | Defines the direction in which flexible items are laid out. |
flex-flow | flex-direction and flex-wrap values like row wrap, column-reverse nowrap, etc. | A shorthand for setting the direction and wrap properties of flexible items. |
flex-grow | <number>, initial, inherit, unset | Specifies how much a flexible item should grow relative to the rest. |
flex-shrink | <number>, initial, inherit, unset | Specifies how much a flexible item should shrink relative to the rest. |
flex-wrap | nowrap, wrap, wrap-reverse, initial, inherit, unset | Determines whether flexible items should wrap when they exceed the container’s width. |
float | left, right, none, initial, inherit, unset | Specifies how an element should float in relation to its containing element. |
font | Various properties combined like font-family, font-size, font-weight, font-style, line-height, etc. | A shorthand for setting font-related properties. |
font-family | <font-family>, initial, inherit, unset | Sets the font family for text content. |
font-feature-settings | normal, <feature-value>, initial, inherit, unset | Controls advanced typographic features in OpenType fonts. |
font-kerning | auto, normal, none, initial, inherit, unset | Defines how the font handles kerning. |
font-size | <length>, <percentage>, small, medium, large, larger, smaller, initial, inherit, unset | Sets the font size for text content. |
font-size-adjust | <number>, none, initial, inherit, unset | Controls the adjustment of font size in case the requested font is unavailable. |
font-stretch | normal, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded, initial, inherit, unset | Specifies the font width or stretch. |
font-style | normal, italic, oblique, initial, inherit, unset | Sets the style (normal, italic, or oblique) of text. |
font-variant | normal, small-caps, initial, inherit, unset | Defines whether text should be displayed in small capitals. |
font-variant-caps | normal, small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps, initial, inherit, unset | Controls the usage of uppercase and lowercase characters. |
font-variant-east-asian | normal, ruby, initial, inherit, unset | Specifies how East Asian characters are displayed in text content. |
font-variant-ligatures | normal, none, common-ligatures, no-common-ligatures, discretionary-ligatures, no-discretionary-ligatures, historical-ligatures, no-historical-ligatures, initial, inherit, unset | Enables or disables various font ligatures. |
font-variant-numeric | normal, lining-nums, oldstyle-nums, ordinal, slashed-zero, lining-nums-proportional, oldstyle-nums-proportional, ordinal-proportional, slashed-zero-proportional, tabular-nums, oldstyle-nums, proportional-nums, ordinal-nums, slashed-zero-nums, initial, inherit, unset | Specifies how numbers are displayed in text content. |
font-variant-position | normal, sub, super, initial, inherit, unset | Sets the vertical position of text within a line (subscripts, superscripts). |
font-weight | normal, bold, bolder, lighter, 100 to 900, initial, inherit, unset | Sets the weight (thickness) of the font. |
gap | normal, <length>, <percentage>, initial, inherit, unset | A shorthand for setting the grid row and column gaps. |
grid | Various values like 1fr 1fr / 2fr 1fr, auto auto auto / auto auto, etc. | A shorthand for defining grid rows, columns, and areas. |
grid-area | <row-start> / <column-start> / <row-end> / <column-end>, auto, initial, inherit, unset | Specifies the size of a grid item and its placement within the grid. |
grid-auto-columns | <length>, auto, min-content, max-content, initial, inherit, unset | Defines the size of columns not explicitly sized in the grid. |
grid-auto-flow | row, column, dense, initial, inherit, unset | Controls how auto-placed items are positioned in the grid. |
grid-auto-rows | <length>, auto, min-content, max-content, initial, inherit, unset | Defines the size of rows not explicitly sized in the grid. |
grid-column | <start-line> / <end-line>, auto, initial, inherit, unset | Specifies a grid item’s start and end positions within a grid row. |
grid-column-end | <end-line>, auto, initial, inherit, unset | Specifies the end position of a grid item within a grid row. |
grid-column-gap | <length>, initial, inherit, unset | Sets the gap between grid columns. |
grid-column-start | <start-line>, auto, initial, inherit, unset | Specifies the start position of a grid item within a grid row. |
grid-gap | <row-gap> <column-gap>, initial, inherit, unset | A shorthand for setting the grid row and column gaps. |
grid-row | <start-line> / <end-line>, auto, initial, inherit, unset | Specifies a grid item’s start and end positions within a grid row. |
grid-row-end | <end-line>, auto, initial, inherit, unset | Specifies the end position of a grid item within a grid row. |
grid-row-gap | <length>, initial, inherit, unset | Sets the gap between grid rows. |
grid-row-start | <start-line>, auto, initial, inherit, unset | Specifies the start position of a grid item within a grid row. |
grid-template | none, subgrid, initial, inherit, unset | Specifies how grid items are placed in rows and columns. |
grid-template-areas | Various values like "header header header" "main main sidebar" "footer footer footer", initial, inherit, unset | Defines named grid areas for items in a grid container. |
grid-template-columns | Various values like 1fr 2fr 1fr, repeat(3, 1fr), auto auto, initial, inherit, unset | Specifies the size of columns in a grid container. |
grid-template-rows | Various values like 1fr 2fr 1fr, repeat(3, 1fr), auto auto, initial, inherit, unset | Specifies the size of rows in a grid container. |
hanging-punctuation | none, first, last, force-end, allow-end, initial, inherit, unset | Controls the use of punctuation character hanging in the margin. |
height | <length>, <percentage>, auto, initial, inherit, unset | Sets the height of an element. |
hyphens | manual, auto, none, initial, inherit, unset | Specifies how words should be hyphenated in text content. |
image-orientation | angle, from-image, initial, inherit, unset | Specifies the orientation of an image, overriding its EXIF data. |
image-rendering | auto, crisp-edges, pixelated, initial, inherit, unset | Controls the quality of the rendered image. |
initial-letter | <integer>, initial, inherit, unset | Specifies the number of lines that the initial letter should span. |
inline-size | <length>, max-content, min-content, fit-content, initial, inherit, unset | Sets the width of an element in a horizontal writing mode (opposite of block-size). |
inset | <length>, <percentage>, auto, initial, inherit, unset | A shorthand for specifying the inset properties of an element. |
inset-block | <length>, <percentage>, auto, initial, inherit, unset | Sets the top and bottom margins of an element in its container. |
inset-block-end | <length>, <percentage>, auto, initial, inherit, unset | Sets the bottom margin of an element in its container. |
inset-block-start | <length>, <percentage>, auto, initial, inherit, unset | Sets the top margin of an element in its container. |
inset-inline | <length>, <percentage>, auto, initial, inherit, unset | Sets the left and right margins of an element in its container. |
inset-inline-end | <length>, <percentage>, auto, initial, inherit, unset | Sets the right margin of an element in its container. |
inset-inline-start | <length>, <percentage>, auto, initial, inherit, unset | Sets the left margin of an element in its container. |
justify-content | flex-start, flex-end, center, space-between, space-around, space-evenly, initial, inherit, unset | Aligns the flexible container’s content along the main-axis. |
justify-items | auto, normal, stretch, center, start, end, flex-start, flex-end, self-start, self-end, left, right, baseline, first baseline, last baseline, safe center, unsafe center, legacy right, legacy left, legacy center, initial, inherit, unset | Aligns grid items inside their grid area along the inline (row) axis. |
justify-self | auto, normal, stretch, center, start, end, flex-start, flex-end, self-start, self-end, left, right, baseline, first baseline, last baseline, safe center, unsafe center, legacy right, legacy left, legacy center, initial, inherit, unset | Aligns a grid item inside its grid area along the inline (row) axis. |
left | <length>, <percentage>, auto, initial, inherit, unset | Defines the distance between the left edge of the positioned element and the left edge of its containing element. |
letter-spacing | <length>, normal, initial, inherit, unset | Sets the spacing between characters in text content. |
line-break | auto, loose, normal, strict, anywhere, initial, inherit, unset | Controls the treatment of line breaks within text content. |
line-height | <number>, <length>, <percentage>, normal, initial, inherit, unset | Sets the space between lines in text content. |
list-style | Various properties combined like list-style-type, list-style-position, list-style-image | A shorthand for setting list-related properties. |
list-style-image | none, url('image.png'), initial, inherit, unset | Sets an image as the list item marker. |
list-style-position | inside, outside, initial, inherit, unset | Specifies whether the list item marker should be inside or outside the list item box. |
list-style-type | Various values like disc, decimal, upper-roman, lower-alpha, initial, inherit, unset | Defines the type of marker (bullet, number, etc.) for list items. |
margin | <length>, <percentage>, auto, initial, inherit, unset | Sets the margin on all sides of an element. |
margin-block | <length>, <percentage>, auto, initial, inherit, unset | Sets the top and bottom margins of an element. |
margin-block-end | <length>, <percentage>, auto, initial, inherit, unset | Sets the bottom margin of an element. |
margin-block-start | <length>, <percentage>, auto, initial, inherit, unset | Sets the top margin of an element. |
margin-bottom | <length>, <percentage>, auto, initial, inherit, unset | Sets the bottom margin of an element. |
margin-inline | <length>, <percentage>, auto, initial, inherit, unset | Sets the left and right margins of an element. |
margin-inline-end | <length>, <percentage>, auto, initial, inherit, unset | Sets the right margin of an element. |
margin-inline-start | <length>, <percentage>, auto, initial, inherit, unset | Sets the left margin of an element. |
margin-left | <length>, <percentage>, auto, initial, inherit, unset | Sets the left margin of an element. |
margin-right | <length>, <percentage>, auto, initial, inherit, unset | Sets the right margin of an element. |
margin-top | <length>, <percentage>, auto, initial, inherit, unset | Sets the top margin of an element. |
mask | Various values like url('mask.png'), linear-gradient(), radial-gradient(), none, initial, inherit, unset | Clips an element to a mask image or a gradient. |
mask-clip | border-box, padding-box, content-box, initial, inherit, unset | Defines the area of an element that should be visible inside a mask. |
mask-composite | add, exclude, intersect, subtract, initial, inherit, unset | Specifies how the mask image and the element’s background should be combined. |
mask-image | Various values like url('mask.png'), linear-gradient(), radial-gradient(), none, initial, inherit, unset | Sets the image or gradient used as a mask for an element. |
mask-mode | alpha, luminance, initial, inherit, unset | Defines how the mask image is used to create the mask. |
mask-origin | border-box, padding-box, content-box, initial, inherit, unset | Specifies where the mask positioning area is calculated from. |
mask-position | <length> <length>, <percentage> <percentage>, left, center, right, top, bottom, initial, inherit, unset | Sets the position of the mask image. |
mask-repeat | repeat, space, round, no-repeat, initial, inherit, unset | Specifies how the mask image should repeat. |
mask-size | <length> <length>, <percentage> <percentage>, auto, cover, contain, initial, inherit, unset | Sets the size of the mask image. |
mask-type | alpha, luminance, initial, inherit, unset | Specifies the type of mask (whether the mask is based on alpha or luminance values). |
max-block-size | <length>, <percentage>, initial, inherit, unset | Sets the maximum block size for an element. |
max-height | <length>, <percentage>, auto, initial, inherit, unset | Sets the maximum height for an element. |
max-inline-size | <length>, <percentage>, initial, inherit, unset | Sets the maximum inline size for an element. |
max-width | <length>, <percentage>, auto, initial, inherit, unset | Sets the maximum width for an element. |
min-block-size | <length>, <percentage>, initial, inherit, unset | Sets the minimum block size for an element. |
min-height | <length>, <percentage>, auto, initial, inherit, unset | Sets the minimum height for an element. |
min-inline-size | <length>, <percentage>, initial, inherit, unset | Sets the minimum inline size for an element. |
min-width | <length>, <percentage>, auto, initial, inherit, unset | Sets the minimum width for an element. |
mix-blend-mode | normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity, initial, inherit, unset | Specifies how an element’s content should blend with the content behind it. |
object-fit | fill, contain, cover, none, scale-down, initial, inherit, unset | Defines how an element’s content should be resized to fit its container. |
object-position | <length> <length>, <percentage> <percentage>, left, center, right, top, bottom, initial, inherit, unset | Sets the position of an element’s content within its container. |
offset | auto, initial, inherit, unset | A shorthand property for setting offset properties like offset-anchor, offset-distance, offset-path, and offset-rotate. |
offset-anchor | none, auto, <position>, <path> | Specifies the anchor point for positioning an element. |
offset-block | auto, <length>, <percentage>, initial, inherit, unset | Sets the offset relative to the element’s containing block on the block-axis. |
offset-block-end | auto, <length>, <percentage>, initial, inherit, unset | Sets the offset relative to the end edge of the containing block on the block-axis. |
offset-block-start | auto, <length>, <percentage>, initial, inherit, unset | Sets the offset relative to the start edge of the containing block on the block-axis. |
offset-inline | auto, <length>, <percentage>, initial, inherit, unset | Sets the offset relative to the element’s containing block on the inline-axis. |
offset-inline-end | auto, <length>, <percentage>, initial, inherit, unset | Sets the offset relative to the end edge of the containing block on the inline-axis. |
offset-inline-start | auto, <length>, <percentage>, initial, inherit, unset | Sets the offset relative to the start edge of the containing block on the inline-axis. |
offset-distance | auto, <length>, <percentage>, initial, inherit, unset | Sets the offset distance between the element and its anchor point. |
offset-path | none, initial, inherit, unset, <path> | Specifies a path that an element should follow as it is positioned. |
offset-rotate | auto, auto 0deg, <angle> auto, reverse(auto) auto, reverse(0deg) auto, auto reverse(auto), auto reverse(0deg), <angle> reverse(auto) auto, <angle> reverse(0deg) auto, reverse(auto) reverse(auto), reverse(0deg) reverse(auto), reverse(auto) reverse(0deg), reverse(0deg) reverse(0deg), auto auto reverse(auto), auto auto reverse(0deg), <angle> auto reverse(auto), <angle> auto reverse(0deg), auto reverse(auto) reverse(auto), auto reverse(0deg) reverse(auto), auto reverse(auto) reverse(0deg), auto reverse(0deg) reverse(0deg), <angle> reverse(auto) reverse(auto), <angle> reverse(0deg) reverse(auto), <angle> reverse(auto) reverse(0deg), <angle> reverse(0deg) reverse(0deg) | Defines the rotation angle of an element as it follows a path. |
opacity | <number>, initial, inherit, unset | Sets the opacity level of an element. |
order | <integer>, initial, inherit, unset | Specifies the order in which a flex item is displayed inside its container. |
orphans | <integer>, initial, inherit, unset | Sets the minimum number of lines in a block container that must be shown at the bottom of a page. |
outline | Various properties combined like outline-color, outline-offset, outline-style, outline-width | A shorthand for setting outline-related properties. |
outline-color | <color>, invert, initial, inherit, unset | Sets the color of the outline around an element. |
outline-offset | <length>, initial, inherit, unset | Specifies the space between an outline and the border of an element. |
outline-style | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit, unset | Sets the style of the outline around an element. |
outline-width | <length>, thin, medium, thick, initial, inherit, unset | Sets the width of the outline around an element. |
overflow | visible, hidden, scroll, auto, initial, inherit, unset | Determines how an element should behave if its content overflows its box. |
overflow-block | visible, hidden, scroll, auto, initial, inherit, unset | Defines how to control overflow in the block axis. |
overflow-inline | visible, hidden, scroll, auto, initial, inherit, unset | Defines how to control overflow in the inline axis. |
overflow-wrap | normal, break-word, anywhere, initial, inherit, unset | Specifies whether or not words can be broken within text content. |
overflow-x | visible, hidden, scroll, auto, initial, inherit, unset | Determines how an element should behave if its content overflows its box horizontally. |
overflow-y | visible, hidden, scroll, auto, initial, inherit, unset | Determines how an element should behave if its content overflows its box vertically. |
padding | <length>, <percentage>, initial, inherit, unset | Sets the padding on all sides of an element. |
padding-block | <length>, <percentage>, initial, inherit, unset | Sets the top and bottom padding of an element. |
padding-block-end | <length>, <percentage>, initial, inherit, unset | Sets the bottom padding of an element. |
padding-block-start | <length>, <percentage>, initial, inherit, unset | Sets the top padding of an element. |
padding-bottom | <length>, <percentage>, initial, inherit, unset | Sets the bottom padding of an element. |
padding-inline | <length>, <percentage>, initial, inherit, unset | Sets the left and right padding of an element. |
padding-inline-end | <length>, <percentage>, initial, inherit, unset | Sets the right padding of an element. |
padding-inline-start | <length>, <percentage>, initial, inherit, unset | Sets the left padding of an element. |
padding-left | <length>, <percentage>, initial, inherit, unset | Sets the left padding of an element. |
padding-right | <length>, <percentage>, initial, inherit, unset | Sets the right padding of an element. |
padding-top | <length>, <percentage>, initial, inherit, unset | Sets the top padding of an element. |
page-break-after | auto, always, avoid, left, right, initial, inherit, unset | Specifies the page break behavior after an element. |
page-break-before | auto, always, avoid, left, right, initial, inherit, unset | Specifies the page break behavior before an element. |
page-break-inside | auto, avoid, initial, inherit, unset | Specifies the page break behavior inside an element. |
paint-order | fill, stroke, markers, initial, inherit, unset | Specifies the order in which the fill, stroke, and markers should be painted. |
perspective | <length>, none, initial, inherit, unset | Sets the depth of the perspective for 3D transformations. |
perspective-origin | left, center, right, top, bottom, initial, inherit, unset | Defines the origin point for the perspective property. |
place-content | center start, normal stretch, space-evenly start, end safe end, start legacy center, stretch space-evenly, inherit, unset | A shorthand property for aligning an element’s content on both the block and inline axes. |
place-items | normal start, center, start safe start, stretch, end end, legacy stretch, start, end legacy center, inherit, unset | A shorthand property for aligning an element’s items on both the block and inline axes. |
place-self | normal start, center, start safe start, stretch, end end, legacy stretch, start, end legacy center, inherit, unset | A shorthand property for aligning an element itself on both the block and inline axes. |
pointer-events | auto, none, visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all, initial, inherit, unset | Specifies whether an element can be the target for pointer events. |
position | static, relative, absolute, fixed, sticky, initial, inherit, unset | Specifies the type of positioning for an element. |
quotes | <string>, auto, initial, inherit, unset | Sets the quotation marks for use with the content property. |
resize | none, both, horizontal, vertical, block, inline, initial, inherit, unset | Specifies whether an element can be resized by the user. |
right | <length>, <percentage>, auto, initial, inherit, unset | Defines the distance between the right edge of the positioned element and the right edge of its containing element. |
rotate | <angle>, initial, inherit, unset | Specifies the rotation angle of an element. |
row-gap | <length>, initial, inherit, unset | Sets the gap between grid rows. |
scale | none, scale(<number>, <number>), initial, inherit, unset | Applies a 2D scaling transformation to an element. |
scroll-behavior | auto, smooth, initial, inherit, unset | Defines the scrolling behavior for an element. |
scroll-snap-align | none, start, end, center, initial, inherit, unset | Specifies how an element should be aligned with its snap container. |
scroll-snap-stop | normal, always, initial, inherit, unset | Controls the behavior of scrolling for snap points. |
scroll-snap-type | none, mandatory, proximity, initial, inherit, unset | Sets the scroll-snap behavior for an element. |
scrollbar-color | auto, <color> <color>, initial, inherit, unset | Sets the colors for scrollbar thumbs and tracks. |
scrollbar-width | auto, thin, none, initial, inherit, unset | Specifies the width of scrollbar thumbs. |
shape-image-threshold | <number>, initial, inherit, unset | Sets the alpha threshold used to determine the shape of an element. |
shape-margin | <length>, initial, inherit, unset | Sets the margin applied to an element’s shape. |
shape-outside | none, margin-box, border-box, padding-box, content-box, url('image.png'), initial, inherit, unset | Specifies a shape to wrap around an element. |
size | <length>, <percentage>, auto, portrait, landscape, a3, a4, letter, legal, ledger, tabloid, initial, inherit, unset | Sets the size of an element for printing. |
speak | normal, none, spell-out, initial, inherit, unset | Specifies whether an element should be spoken by a screen reader. |
src | url('image.png'), initial, inherit, unset | Sets the source of an element, typically used with the content property. |
stop-color | <color>, initial, inherit, unset | Specifies the color of a gradient stop. |
stop-opacity | <number>, initial, inherit, unset | Specifies the opacity of a gradient stop. |
stroke | <color>, none, initial, inherit, unset | Sets the color of the stroke (outline) for an element. |
stroke-dasharray | none, <length>, <percentage>, initial, inherit, unset | Specifies the pattern of dashes and gaps in a stroke. |
stroke-dashoffset | <length>, initial, inherit, unset | Specifies the distance into the dash pattern to start the stroke. |
stroke-linecap | butt, round, square, initial, inherit, unset | Specifies the shape used to cap the ends of lines in a stroke. |
stroke-linejoin | miter, round, bevel, initial, inherit, unset | Specifies the shape used to join the ends of lines in a stroke. |
stroke-miterlimit | <number>, initial, inherit, unset | Sets the limit on the ratio of the miter length to the stroke width. |
stroke-opacity | <number>, initial, inherit, unset | Specifies the opacity of a stroke. |
stroke-width | <length>, initial, inherit, unset | Sets the width of the stroke (outline) for an element. |
tab-size | <number>, initial, inherit, unset | Sets the width of tab characters in an element. |
table-layout | auto, fixed, initial, inherit, unset | Defines the algorithm for computing table widths. |
text-align | left, right, center, justify, start, end, initial, inherit, unset | Specifies the horizontal alignment of text content. |
text-align-last | auto, start, end, left, right, center, justify, initial, inherit, unset | Sets the alignment of the last line of text within an element. |
text-combine-upright | none, all, digits, initial, inherit, unset | Determines how upright or sideways text is combined in a line. |
text-decoration | none, underline, overline, line-through, initial, inherit, unset | Specifies the decoration added to text content. |
text-decoration-color | <color>, initial, inherit, unset | Sets the color of the text decoration lines. |
text-decoration-line | none, underline, overline, line-through, initial, inherit, unset | Specifies which text decoration lines are used. |
text-decoration-style | solid, double, dotted, dashed, wavy, initial, inherit, unset | Sets the style of the text decoration lines. |
text-indent | <length>, <percentage>, initial, inherit, unset | Sets the indentation of the first line in a text block. |
text-justify | auto, inter-character, inter-word, none, initial, inherit, unset | Specifies the justification method for text. |
text-orientation | mixed, upright, sideways, initial, inherit, unset | Defines the orientation of text within an element. |
text-overflow | clip, ellipsis, <string>, initial, inherit, unset | Sets what should happen when text overflows the containing element. |
text-rendering | auto, optimizeSpeed, optimizeLegibility, geometricPrecision, initial, inherit, unset | Specifies how to render text for maximum legibility or speed. |
text-shadow | <length> <length> <length> <color>, none, initial, inherit, unset | Adds a shadow to text content. |
text-transform | none, capitalize, uppercase, lowercase, initial, inherit, unset | Controls the capitalization of text. |
text-underline-offset | <length>, auto, initial, inherit, unset | Sets the offset of the underline for an element. |
text-underline-position | auto, under, left, right, initial, inherit, unset | Specifies the position of the underline in text. |
top | <length>, <percentage>, auto, initial, inherit, unset | Defines the distance between the top edge of the positioned element and the top edge of its containing element. |
transform | none, matrix(), matrix3d(), translate(), translate3d(), translateX(), translateY(), translateZ(), scale(), scale3d(), scaleX(), scaleY(), scaleZ(), rotate(), rotate3d(), rotateX(), rotateY(), rotateZ(), skew(), skewX(), skewY(), initial, inherit, unset | Applies a transformation to an element, enabling 2D and 3D transformations. |
transform-box | border-box, fill-box, view-box, initial, inherit, unset | Specifies the layout box in which a 3D element is laid out. |
transform-origin | <length> <length>, <percentage> <percentage>, left, center, right, top, bottom, initial, inherit, unset | Sets the origin for transformations of an element. |
transform-style | flat, preserve-3d, initial, inherit, unset | Determines if 3D transformations should be flattened or preserved. |
transition | A list of properties to transition, their duration, timing function, and delay | A shorthand property for specifying transitions on an element. |
transition-delay | <time>, initial, inherit, unset | Sets the delay before a transition effect starts. |
transition-duration | <time>, initial, inherit, unset | Sets the duration over which a transition effect occurs. |
transition-property | A list of properties to transition, or all, initial, inherit, unset | Specifies the name of the CSS property to apply the transition to. |
transition-timing-function | ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(), initial, inherit, unset | Sets the timing function for a transition effect. |
translate | translate(), translateX(), translateY(), translate3d(), initial, inherit, unset | Applies a translation transformation to an element. |
unicode-bidi | normal, embed, isolate, bidi-override, initial, inherit, unset | Specifies the level of embedding and direction of text within an element. |
user-select | text, none, auto, contain, all, initial, inherit, unset | Controls the ability to select text within an element. |
vertical-align | baseline, middle, sub, super, text-top, text-bottom, top, bottom, <percentage>, <length>, initial, inherit, unset | Sets the vertical alignment of an inline element. |
visibility | visible, hidden, collapse, initial, inherit, unset | Specifies whether an element should be visible or hidden. |
white-space | normal, nowrap, pre, pre-line, pre-wrap, initial, inherit, unset | Determines how white space is handled within an element. |
widows | <integer>, initial, inherit, unset | Sets the minimum number of lines in a block container that must be shown at the top of a page. |
width | <length>, <percentage>, auto, fit-content, max-content, min-content, initial, inherit, unset | Sets the width of an element. |
will-change | A list of properties that will be changed, or auto, scroll-position, contents, initial, inherit, unset | Hints to the browser that an element will be animated and may need to be optimized for it. |
z-index | <integer>, auto, initial, inherit, unset | Specifies the stack order of an element. |