Defines when the animation will start.
(Firefox 9)
Defines whether or not the animation should play in reverse on alternate cycles.
(Firefox 9)
Defines the length of time that an animation takes to complete one cycle.
(Firefox 9)
Defines the number of times an animation cycle is played. The default value is one, meaning the animation will play from beginning to end once.
(Firefox 9)
Defines a list of animations that apply. Each name is used to select the keyframe at-rule that provides the property values for the animation.
(Firefox 9)
Defines whether the animation is running or paused.
(Firefox 9)
Describes how the animation will progress over one cycle of its duration. See the 'transition-timing-function'.
(Firefox 9)
🚨️ Property is nonstandard. Avoid using it.
Used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme.
(Firefox 1)
Syntax: none | button | button-arrow-down | button-arrow-next | button-arrow-previous | button-arrow-up | button-bevel | button-focus | caret | checkbox | checkbox-container | checkbox-label | checkmenuitem | dualbutton | groupbox | listbox | listitem | menuarrow | menubar | menucheckbox | menuimage | menuitem | menuitemtext | menulist | menulist-button | menulist-text | menulist-textfield | menupopup | menuradio | menuseparator | meterbar | meterchunk | progressbar | progressbar-vertical | progresschunk | progresschunk-vertical | radio | radio-container | radio-label | radiomenuitem | range | range-thumb | resizer | resizerpanel | scale-horizontal | scalethumbend | scalethumb-horizontal | scalethumbstart | scalethumbtick | scalethumb-vertical | scale-vertical | scrollbarbutton-down | scrollbarbutton-left | scrollbarbutton-right | scrollbarbutton-up | scrollbarthumb-horizontal | scrollbarthumb-vertical | scrollbartrack-horizontal | scrollbartrack-vertical | searchfield | separator | sheet | spinner | spinner-downbutton | spinner-textfield | spinner-upbutton | splitter | statusbar | statusbarpanel | tab | tabpanel | tabpanels | tab-scroll-arrow-back | tab-scroll-arrow-forward | textfield | textfield-multiline | toolbar | toolbarbutton | toolbarbutton-dropdown | toolbargripper | toolbox | tooltip | treeheader | treeheadercell | treeheadersortarrow | treeitem | treeline | treetwisty | treetwistyopen | treeview | -moz-mac-unified-toolbar | -moz-win-borderless-glass | -moz-win-browsertabbar-toolbox | -moz-win-communicationstext | -moz-win-communications-toolbox | -moz-win-exclude-glass | -moz-win-glass | -moz-win-mediatext | -moz-win-media-toolbox | -moz-window-button-box | -moz-window-button-box-maximized | -moz-window-button-close | -moz-window-button-maximize | -moz-window-button-minimize | -moz-window-button-restore | -moz-window-frame-bottom | -moz-window-frame-left | -moz-window-frame-right | -moz-window-titlebar | -moz-window-titlebar-maximized
Determines whether or not the 'back' side of a transformed element is visible when facing the viewer. With an identity transform, the front side of an element faces the viewer.
(Firefox 10)
Determines the background painting area.
(Firefox 1-3.6)
In Gecko-based applications like Firefox, the -moz-background-inline-policy CSS property specifies how the background image of an inline element is determined when the content of the inline element wraps onto multiple lines. The choice of position has significant effects on repetition.
(Firefox 1)
For elements rendered as a single box, specifies the background positioning area. For elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages) specifies which boxes 'box-decoration-break' operates on to determine the background positioning area(s).
(Firefox 1)
🚨️ Property is nonstandard. Avoid using it.
The -moz-binding CSS property is used by Mozilla-based applications to attach an XBL binding to a DOM element.
(Firefox 1)
Syntax: <url> | none
🚨️ Property is nonstandard. Avoid using it.
Sets a list of colors for the bottom border.
(Firefox 1)
Syntax: <color>+ | none
Shorthand property for setting 'border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset' and 'border-image-repeat'. Omitted values are set to their initial values.
(Firefox 3.6)
🚨️ Property is nonstandard. Avoid using it.
Sets a list of colors for the bottom border.
(Firefox 1)
Syntax: <color>+ | none
🚨️ Property is nonstandard. Avoid using it.
Sets a list of colors for the bottom border.
(Firefox 1)
Syntax: <color>+ | none
🚨️ Property is nonstandard. Avoid using it.
Ske Firefox, -moz-border-bottom-colors sets a list of colors for the bottom border.
(Firefox 1)
Syntax: <color>+ | none
Specifies how a XUL box aligns its contents across (perpendicular to) the direction of its layout. The effect of this is only visible if there is extra space in the box.
(Firefox 1)
Specifies whether a box lays out its contents normally (from the top or left edge), or in reverse (from the bottom or right edge).
(Firefox 1)
Specifies how a box grows to fill the box that contains it, in the direction of the containing box's layout.
(Firefox 1)
Flexible elements can be assigned to flex groups using the 'box-flex-group' property.
(Firefox 1)
Indicates the ordinal group the element belongs to. Elements with a lower ordinal group are displayed before those with a higher ordinal group.
(Firefox 1)
In Mozilla applications, -moz-box-orient specifies whether a box lays out its contents horizontally or vertically.
(Firefox 1)
Specifies how a box packs its contents in the direction of its layout. The effect of this is only visible if there is extra space in the box.
(Firefox 1)
Box Model addition in CSS3.
(Firefox 1)
Describes the optimal number of columns into which the content of the element will be flowed.
(Firefox 3.5)
Sets the gap between columns. If there is a column rule between columns, it will appear in the middle of the gap.
(Firefox 3.5)
Shorthand for setting 'column-rule-width', 'column-rule-style', and 'column-rule-color' at the same place in the style sheet. Omitted values are set to their initial values.
(Firefox 3.5)
Sets the color of the column rule
(Firefox 3.5)
Sets the style of the rule between columns of an element.
(Firefox 3.5)
Sets the width of the rule between columns. Negative values are not allowed.
(Firefox 3.5)
This property describes the width of columns in multicol elements.
(Firefox 3.5)
A shorthand property which sets both 'column-width' and 'column-count'.
(Firefox 9)
🚨️ Property is nonstandard. Avoid using it.
If you reference an SVG image in a webpage (such as with the <img> element or as a background image), the SVG image can coordinate with the embedding element (its context) to have the image adopt property values set on the embedding element. To do this the embedding element needs to list the properties that are to be made available to the image by listing them as values of the -moz-context-properties property, and the image needs to opt in to using those properties by using values such as the context-fill value.
This feature is available since Firefox 55, but is only currently supported with SVG images loaded via chrome:// or resource:// URLs. To experiment with the feature in SVG on the Web it is necessary to set the svg.context-properties.content.enabled pref to true.
Syntax: none | [ fill | fill-opacity | stroke | stroke-opacity ]#
🚨️ Property is nonstandard. Avoid using it.
The non-standard -moz-float-edge CSS property specifies whether the height and width properties of the element include the margin, border, or padding thickness.
(Firefox 1)
Syntax: border-box | content-box | margin-box | padding-box
Provides low-level control over OpenType font features. It is intended as a way of providing access to font features that are not widely used but are needed for a particular use case.
(Firefox 4)
🚨️ Property is nonstandard. Avoid using it.
The -moz-force-broken-image-icon extended CSS property can be used to force the broken image icon to be shown even when a broken image has an alt attribute.
(Firefox 1)
Syntax: 0 | 1
Controls whether hyphenation is allowed to create more break opportunities within a line of text.
(Firefox 9)
🚨️ Property is nonstandard. Avoid using it.
For certain XUL elements and pseudo-elements that use an image from the list-style-image property, this property specifies a region of the image that is used in place of the whole image. This allows elements to use different pieces of the same image to improve performance.
(Firefox 1)
Syntax: <shape> | auto
🚨️ Property is nonstandard. Avoid using it.
The -moz-orient CSS property specifies the orientation of the element to which it's applied.
(Firefox 6)
Syntax: inline | block | horizontal | vertical
🚨️ Property is nonstandard. Avoid using it.
In Mozilla applications like Firefox, the -moz-outline-radius CSS property can be used to give an element's outline rounded corners.
(Firefox 1)
Syntax: <outline-radius>{1,4} [ / <outline-radius>{1,4} ]?
🚨️ Property is nonstandard. Avoid using it.
In Mozilla applications, the -moz-outline-radius-bottomleft CSS property can be used to round the bottom-left corner of an element's outline.
(Firefox 1)
Syntax: <outline-radius>
🚨️ Property is nonstandard. Avoid using it.
In Mozilla applications, the -moz-outline-radius-bottomright CSS property can be used to round the bottom-right corner of an element's outline.
(Firefox 1)
Syntax: <outline-radius>
🚨️ Property is nonstandard. Avoid using it.
In Mozilla applications, the -moz-outline-radius-topleft CSS property can be used to round the top-left corner of an element's outline.
(Firefox 1)
Syntax: <outline-radius>
🚨️ Property is nonstandard. Avoid using it.
In Mozilla applications, the -moz-outline-radius-topright CSS property can be used to round the top-right corner of an element's outline.
(Firefox 1)
Syntax: <outline-radius>
Applies the same transform as the perspective(<number>) transform function, except that it applies only to the positioned or transformed children of the element, not to the transform on the element itself.
(Firefox 10)
Establishes the origin for the perspective property. It effectively sets the X and Y position at which the viewer appears to be looking at the children of the element.
(Firefox 10)
🚨️ Property is nonstandard. Avoid using it.
-moz-stack-sizing is an extended CSS property. Normally, a stack will change its size so that all of its child elements are completely visible. For example, moving a child of the stack far to the right will widen the stack so the child remains visible.
Syntax: ignore | stretch-to-fit
Describes how the last line of a block or a line right before a forced line break is aligned when 'text-align' is set to 'justify'.
(Firefox 12)
🚨️ Property is nonstandard. Avoid using it.
The -moz-text-blink non-standard Mozilla CSS extension specifies the blink mode.
Syntax: none | blink
Specifies the color of text decoration (underlines overlines, and line-throughs) set on the element with text-decoration-line.
(Firefox 6)
Specifies what line decorations, if any, are added to the element.
(Firefox 6)
Specifies the line style for underline, line-through and overline text decoration.
(Firefox 6)
Specifies a size adjustment for displaying text content in mobile browsers.
(Firefox)
A two-dimensional transformation is applied to an element through the 'transform' property. This property contains a list of transform functions similar to those allowed by SVG.
(Firefox 3.5)
Establishes the origin of transformation for an element.
(Firefox 3.5)
Shorthand property combines four of the transition properties into a single property.
(Firefox 4)
Defines when the transition will start. It allows a transition to begin execution some period of time from when it is applied.
(Firefox 4)
Specifies how long the transition from the old value to the new value should take.
(Firefox 4)
Specifies the name of the CSS property to which the transition is applied.
(Firefox 4)
Describes how the intermediate values used during a transition will be calculated.
(Firefox 4)
🚨️ Property is nonstandard. Avoid using it.
Used to indicate whether the element can have focus.
(Firefox 1)
Syntax: ignore | normal | select-after | select-before | select-menu | select-same | select-all | none
🚨️ Property is nonstandard. Avoid using it.
In Mozilla applications, -moz-user-input determines if an element will accept user input.
(Firefox 1)
Syntax: auto | none | enabled | disabled
🚨️ Property is nonstandard. Avoid using it.
The -moz-user-modify property has no effect. It was originally planned to determine whether or not the content of an element can be edited by a user.
Syntax: read-only | read-write | write-only
Controls the appearance of selection.
(Firefox 1.5)
🚨️ Property is nonstandard. Avoid using it.
The -moz-window-dragging CSS property specifies whether a window is draggable or not. It only works in Chrome code, and only on Mac OS X.
Syntax: drag | no-drag
🚨️ Property is nonstandard. Avoid using it.
The -moz-window-shadow CSS property specifies whether a window will have a shadow. It only works on Mac OS X.
Syntax: default | menu | tooltip | sheet | none
🚨️ Property is nonstandard. Avoid using it.
IE only. Has the ability to turn off its system underlines for accelerator keys until the ALT key is pressed
(Edge, IE 10)
Syntax: false | true
IE only. Used to extend behaviors of the browser
(IE 8)
🚨️ Property is nonstandard. Avoid using it.
Sets the block-progression value and the flow orientation
(IE 8)
Syntax: tb | rl | bt | lr
🚨️ Property is nonstandard. Avoid using it.
Specifies the zoom behavior that occurs when a user hits the zoom limit during a manipulation.
(Edge, IE 10)
Syntax: none | chained
🚨️ Property is nonstandard. Avoid using it.
Shorthand property for the -ms-content-zoom-limit-min and -ms-content-zoom-limit-max properties.
(Edge, IE 10)
Syntax: <'-ms-content-zoom-limit-min'> <'-ms-content-zoom-limit-max'>
🚨️ Property is nonstandard. Avoid using it.
Specifies the maximum zoom factor.
(Edge, IE 10)
Syntax: <percentage>
🚨️ Property is nonstandard. Avoid using it.
Specifies the minimum zoom factor.
(Edge, IE 10)
Syntax: <percentage>
🚨️ Property is nonstandard. Avoid using it.
Shorthand property for the -ms-content-zoom-snap-type and -ms-content-zoom-snap-points properties.
(Edge, IE 10)
Syntax: <'-ms-content-zoom-snap-type'> || <'-ms-content-zoom-snap-points'>
🚨️ Property is nonstandard. Avoid using it.
Defines where zoom snap-points are located.
(Edge, IE 10)
Syntax: snapInterval( <percentage>, <percentage> ) | snapList( <percentage># )
🚨️ Property is nonstandard. Avoid using it.
Specifies how zooming is affected by defined snap-points.
(Edge, IE 10)
Syntax: none | proximity | mandatory
🚨️ Property is nonstandard. Avoid using it.
Specifies whether zooming is enabled.
(Edge, IE 10)
Syntax: none | zoom
🚨️ Property is nonstandard. Avoid using it.
IE only. Used to produce visual effects.
(IE 8-9)
Syntax: <string>
specifies the parameters of a flexible length: the positive and negative flexibility, and the preferred size.
(IE 10)
Aligns flex items along the cross axis of the current line of the flex container.
(IE 10)
Specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis.
(IE 10)
Specifies how flexbox items are placed in the flexbox.
(IE 10)
Allows the default alignment along the cross axis to be overridden for individual flex items.
(IE 10)
Aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how 'justify-content' aligns individual items within the main-axis.
(IE 10)
Controls the order in which children of a flex container appear within the flex container, by assigning them to ordinal groups.
(IE 10)
Aligns flex items along the main axis of the current line of the flex container.
(IE 10)
Controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.
(IE 10)
🚨️ Property is nonstandard. Avoid using it.
Makes a block container a region and associates it with a named flow.
(Edge, IE 10)
Syntax: [ none | <custom-ident> ]#
🚨️ Property is nonstandard. Avoid using it.
Places an element or its contents into a named flow.
(Edge, IE 10)
Syntax: [ none | <custom-ident> ]#
Used to place grid items and explicitly defined grid cells in the Grid.
(Edge 12, IE 10)
Aligns the columns in a grid.
(Edge 12, IE 10)
Specifies the number of columns to span.
(Edge 12, IE 10)
🚨️ Property is nonstandard. Avoid using it.
Lays out the columns of the grid.
(Edge, IE 10)
Syntax: none | <track-list> | <auto-track-list>
Grid-layer is similar in concept to z-index, but avoids overloading the meaning of the z-index property, which is applicable only to positioned elements.
(Edge, IE 10)
grid-row is used to place grid items and explicitly defined grid cells in the Grid.
(Edge 12, IE 10)
Aligns the rows in a grid.
(Edge 12, IE 10)
Specifies the number of rows to span.
(Edge 12, IE 10)
🚨️ Property is nonstandard. Avoid using it.
Lays out the columns of the grid.
(Edge, IE 10)
Syntax: none | <track-list> | <auto-track-list>
🚨️ Property is nonstandard. Avoid using it.
Specifies if properties should be adjusted in high contrast mode.
(Edge, IE 10)
Syntax: auto | none
🚨️ Property is nonstandard. Avoid using it.
Specifies the minimum number of characters in a hyphenated word.
(Edge, IE 10)
Syntax: auto | <integer>{1,3}
🚨️ Property is nonstandard. Avoid using it.
Indicates the maximum number of successive hyphenated lines in an element.
(Edge, IE 10)
Syntax: no-limit | <integer>
🚨️ Property is nonstandard. Avoid using it.
Specifies the maximum amount of unfilled space (before justification) that may be left in the line box before hyphenation is triggered to pull part of a word from the next line back up into the current line.
(Edge, IE 10)
Syntax: <percentage> | <length>
Controls whether hyphenation is allowed to create more break opportunities within a line of text.
(Edge, IE 10)
🚨️ Property is nonstandard. Avoid using it.
Aligns the Input Method Editor (IME) candidate window box relative to the element on which the IME composition is active.
Syntax: auto | after
Controls the state of the input method editor for text fields.
(IE 10)
Gets or sets the interpolation (resampling) method used to stretch images.
(IE 7)
Sets or retrieves the composite document grid properties that specify the layout of text characters.
(Edge, IE 10)
Sets or retrieves the size of the character grid used for rendering the text content of an element.
(Edge, IE 10)
Sets or retrieves the gridline value used for rendering the text content of an element.
(Edge, IE 10)
Gets or sets whether the text layout grid uses two dimensions.
(Edge, IE 10)
Sets or retrieves the type of grid used for rendering the text content of an element.
(Edge, IE 10)
Specifies what set of line breaking restrictions are in effect within the element.
(Edge, IE 10)
🚨️ Property is nonstandard. Avoid using it.
Specify whether content is clipped when it overflows the element's content area.
(Edge, IE 10)
Syntax: auto | none | scrollbar | -ms-autohiding-scrollbar
Applies the same transform as the perspective(<number>) transform function, except that it applies only to the positioned or transformed children of the element, not to the transform on the element itself.
(IE 10)
Establishes the origin for the perspective property. It effectively sets the X and Y position at which the viewer appears to be looking at the children of the element.
(IE 10)
Establishes the origin for the perspective property. It effectively sets the X position at which the viewer appears to be looking at the children of the element.
(IE 10)
Establishes the origin for the perspective property. It effectively sets the Y position at which the viewer appears to be looking at the children of the element.
(IE 10)
Gets or sets a value that specifies whether a progress control displays as a bar or a ring.
(IE 10)
🚨️ Property is nonstandard. Avoid using it.
Gets or sets a value that indicates the scrolling behavior that occurs when a user hits the content boundary during a manipulation.
(Edge, IE 10)
Syntax: chained | none
🚨️ Property is nonstandard. Avoid using it.
Gets or sets a shorthand value that sets values for the -ms-scroll-limit-x-min, -ms-scroll-limit-y-min, -ms-scroll-limit-x-max, and -ms-scroll-limit-y-max properties.
(Edge, IE 10)
Syntax: <'-ms-scroll-limit-x-min'> <'-ms-scroll-limit-y-min'> <'-ms-scroll-limit-x-max'> <'-ms-scroll-limit-y-max'>
🚨️ Property is nonstandard. Avoid using it.
Gets or sets a value that specifies the maximum value for the scrollLeft property.
(Edge, IE 10)
Syntax: auto | <length>
🚨️ Property is nonstandard. Avoid using it.
Gets or sets a value that specifies the minimum value for the scrollLeft property.
(Edge, IE 10)
Syntax: <length>
🚨️ Property is nonstandard. Avoid using it.
Gets or sets a value that specifies the maximum value for the scrollTop property.
(Edge, IE 10)
Syntax: auto | <length>
🚨️ Property is nonstandard. Avoid using it.
Gets or sets a value that specifies the minimum value for the scrollTop property.
(Edge, IE 10)
Syntax: <length>
🚨️ Property is nonstandard. Avoid using it.
Gets or sets a value that indicates whether or not small motions perpendicular to the primary axis of motion will result in either changes to both the scrollTop and scrollLeft properties or a change to the primary axis (for instance, either the scrollTop or scrollLeft properties will change, but not both).
(Edge, IE 10)
Syntax: none | railed
🚨️ Property is nonstandard. Avoid using it.
Gets or sets a value that defines where snap-points will be located along the x-axis.
(Edge, IE 10)
Syntax: snapInterval( <length-percentage>, <length-percentage> ) | snapList( <length-percentage># )
🚨️ Property is nonstandard. Avoid using it.
Gets or sets a value that defines where snap-points will be located along the y-axis.
(Edge, IE 10)
Syntax: snapInterval( <length-percentage>, <length-percentage> ) | snapList( <length-percentage># )
🚨️ Property is nonstandard. Avoid using it.
Gets or sets a value that defines what type of snap-point should be used for the current element. There are two type of snap-points, with the primary difference being whether or not the user is guaranteed to always stop on a snap-point.
(Edge, IE 10)
Syntax: none | proximity | mandatory
🚨️ Property is nonstandard. Avoid using it.
Gets or sets a shorthand value that sets values for the -ms-scroll-snap-type and -ms-scroll-snap-points-x properties.
(Edge, IE 10)
Syntax: <'-ms-scroll-snap-type'> <'-ms-scroll-snap-points-x'>
🚨️ Property is nonstandard. Avoid using it.
Gets or sets a shorthand value that sets values for the -ms-scroll-snap-type and -ms-scroll-snap-points-y properties.
(Edge, IE 10)
Syntax: <'-ms-scroll-snap-type'> <'-ms-scroll-snap-points-y'>
🚨️ Property is nonstandard. Avoid using it.
Gets or sets a value that specifies whether vertical-to-horizontal scroll wheel translation occurs on the specified element.
(Edge, IE 10)
Syntax: none | vertical-to-horizontal
🚨️ Property is nonstandard. Avoid using it.
Determines the color of the top and left edges of the scroll box and scroll arrows of a scroll bar.
(IE 8)
Syntax: <color>
🚨️ Property is nonstandard. Avoid using it.
Determines the color of the arrow elements of a scroll arrow.
(IE 8)
Syntax: <color>
🚨️ Property is nonstandard. Avoid using it.
Determines the color of the main elements of a scroll bar, which include the scroll box, track, and scroll arrows.
(IE 8)
Syntax: <color>
🚨️ Property is nonstandard. Avoid using it.
Determines the color of the gutter of a scroll bar.
(IE 8)
Syntax: <color>
🚨️ Property is nonstandard. Avoid using it.
Determines the color of the scroll box and scroll arrows of a scroll bar.
(IE 8)
Syntax: <color>
🚨️ Property is nonstandard. Avoid using it.
Determines the color of the top and left edges of the scroll box and scroll arrows of a scroll bar.
(IE 8)
Syntax: <color>
🚨️ Property is nonstandard. Avoid using it.
Determines the color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar.
(IE 8)
Syntax: <color>
🚨️ Property is nonstandard. Avoid using it.
Determines the color of the track element of a scroll bar.
(IE 5)
Syntax: <color>
Describes how the last line of a block or a line right before a forced line break is aligned when 'text-align' is set to 'justify'.
(Edge, IE 8)
🚨️ Property is nonstandard. Avoid using it.
Determines whether or not a full-width punctuation mark character should be trimmed if it appears at the beginning of a line, so that its 'ink' lines up with the first glyph in the line above and below.
(Edge, IE 8)
Syntax: none | ideograph-alpha | ideograph-numeric | ideograph-parenthesis | ideograph-space
This property specifies the combination of multiple characters into the space of a single character.
(Edge, IE 11)
Selects the justification algorithm used when 'text-align' is set to 'justify'. The property applies to block containers, but the UA may (but is not required to) also support it on inline elements.
(Edge, IE 8)
Sets or retrieves the ratio of kashida expansion to white space expansion when justifying lines of text in the object.
(Edge, IE 10)
Text can overflow for example when it is prevented from wrapping
(IE 10)
Specifies a size adjustment for displaying text content in mobile browsers.
(Edge, IE 10)
Sets the position of an underline specified on the same element: it does not affect underlines specified by ancestor elements.This property is typically used in vertical writing contexts such as in Japanese documents where it often desired to have the underline appear 'over' (to the right of) the affected run of text
(Edge, IE 10)
Gets or sets a value that indicates whether and how a given region can be manipulated by the user.
(IE 10)
🚨️ Property is nonstandard. Avoid using it.
Gets or sets a value that toggles the 'gripper' visual elements that enable touch text selection.
(Edge, IE 10)
Syntax: grippers | none
A two-dimensional transformation is applied to an element through the 'transform' property. This property contains a list of transform functions similar to those allowed by SVG.
(IE 9-9)
Establishes the origin of transformation for an element.
(IE 9-9)
The x coordinate of the origin for transforms applied to an element with respect to its border box.
(IE 10)
The y coordinate of the origin for transforms applied to an element with respect to its border box.
(IE 10)
The z coordinate of the origin for transforms applied to an element with respect to its border box.
(IE 10)
🚨️ Property is nonstandard. Avoid using it.
Controls the appearance of selection.
(Edge, IE 10)
Syntax: none | element | text
Specifies line break opportunities for non-CJK scripts.
(IE 8)
Specifies whether the UA may break within a word to prevent overflow when an otherwise-unbreakable string is too long to fit.
(IE 8)
🚨️ Property is nonstandard. Avoid using it.
An element becomes an exclusion when its 'wrap-flow' property has a computed value other than 'auto'.
(Edge, IE 10)
Syntax: auto | both | start | end | maximum | clear
🚨️ Property is nonstandard. Avoid using it.
Gets or sets a value that is used to offset the inner wrap shape from other shapes.
(Edge, IE 10)
Syntax: <length>
🚨️ Property is nonstandard. Avoid using it.
Specifies if an element inherits its parent wrapping context. In other words if it is subject to the exclusions defined outside the element.
(Edge, IE 10)
Syntax: wrap | none
Shorthand property for both 'direction' and 'block-progression'.
(IE 8)
Sets or retrieves the magnification scale of the object.
(IE 8)
Gets or sets a value that indicates whether an animation is used when zooming.
(IE 10)
Shorthand property combines six of the animation properties into a single property.
(Opera 12)
Defines when the animation will start.
(Opera 12)
Defines whether or not the animation should play in reverse on alternate cycles.
(Opera 12)
Defines the length of time that an animation takes to complete one cycle.
(Opera 12)
Defines what values are applied by the animation outside the time it is executing.
(Opera 12)
Defines the number of times an animation cycle is played. The default value is one, meaning the animation will play from beginning to end once.
(Opera 12)
Defines a list of animations that apply. Each name is used to select the keyframe at-rule that provides the property values for the animation.
(Opera 12)
Defines whether the animation is running or paused.
(Opera 12)
Describes how the animation will progress over one cycle of its duration. See the 'transition-timing-function'.
(Opera 12)
Shorthand property for setting 'border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset' and 'border-image-repeat'. Omitted values are set to their initial values.
(Opera 11.6)
Specifies how the contents of a replaced element should be scaled relative to the box established by its used height and width.
(Opera 10.6)
Determines the alignment of the replaced element inside its box.
(Opera 10.6)
This property determines the width of the tab character (U+0009), in space characters (U+0020), when rendered.
(Opera 10.6)
Determines which row of a inline-table should be used as baseline of inline-table.
(Opera 9.6)
Text can overflow for example when it is prevented from wrapping
(Opera 10)
A two-dimensional transformation is applied to an element through the 'transform' property. This property contains a list of transform functions similar to those allowed by SVG.
(Opera 10.5)
Establishes the origin of transformation for an element.
(Opera 10.5)
Shorthand property combines four of the transition properties into a single property.
(Opera 11.5)
Defines when the transition will start. It allows a transition to begin execution some period of time from when it is applied.
(Opera 11.5)
Specifies how long the transition from the old value to the new value should take.
(Opera 11.5)
Specifies the name of the CSS property to which the transition is applied.
(Opera 11.5)
Describes how the intermediate values used during a transition will be calculated.
(Opera 11.5)
Shorthand property combines six of the animation properties into a single property.
(Chrome, Safari 5)
Defines when the animation will start.
(Chrome, Safari 5)
Defines whether or not the animation should play in reverse on alternate cycles.
(Chrome, Safari 5)
Defines the length of time that an animation takes to complete one cycle.
(Chrome, Safari 5)
Defines what values are applied by the animation outside the time it is executing.
(Chrome, Safari 5)
Defines the number of times an animation cycle is played. The default value is one, meaning the animation will play from beginning to end once.
(Chrome, Safari 5)
Defines a list of animations that apply. Each name is used to select the keyframe at-rule that provides the property values for the animation.
(Chrome, Safari 5)
Defines whether the animation is running or paused.
(Chrome, Safari 5)
Describes how the animation will progress over one cycle of its duration. See the 'transition-timing-function'.
(Chrome, Safari 5)
🚨️ Property is nonstandard. Avoid using it.
Changes the appearance of buttons and other controls to resemble native controls.
(Chrome, Safari 3)
Syntax: none | button | button-bevel | caret | checkbox | default-button | inner-spin-button | listbox | listitem | media-controls-background | media-controls-fullscreen-background | media-current-time-display | media-enter-fullscreen-button | media-exit-fullscreen-button | media-fullscreen-button | media-mute-button | media-overlay-play-button | media-play-button | media-seek-back-button | media-seek-forward-button | media-slider | media-sliderthumb | media-time-remaining-display | media-toggle-closed-captions-button | media-volume-slider | media-volume-slider-container | media-volume-sliderthumb | menulist | menulist-button | menulist-text | menulist-textfield | meter | progress-bar | progress-bar-value | push-button | radio | searchfield | searchfield-cancel-button | searchfield-decoration | searchfield-results-button | searchfield-results-decoration | slider-horizontal | slider-vertical | sliderthumb-horizontal | sliderthumb-vertical | square-button | textarea | textfield | -apple-pay-button
Applies a filter effect where the first filter in the list takes the element's background image as the input image.
(Safari 9)
Determines whether or not the 'back' side of a transformed element is visible when facing the viewer. With an identity transform, the front side of an element faces the viewer.
(Chrome, Safari 5)
Determines the background painting area.
(Chrome, Safari 3)
(Chrome, Safari 3)
For elements rendered as a single box, specifies the background positioning area. For elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages) specifies which boxes 'box-decoration-break' operates on to determine the background positioning area(s).
(Chrome, Safari 3)
🚨️ Property is nonstandard. Avoid using it.
The -webkit-border-before CSS property is a shorthand property for setting the individual logical block start border property values in a single place in the style sheet.
(Edge 79, Safari 5.1, Chrome 8, Opera 15)
Syntax: <'border-width'> || <'border-style'> || <color>
🚨️ Property is nonstandard. Avoid using it.
The -webkit-border-before-color CSS property sets the color of the individual logical block start border in a single place in the style sheet.
Syntax: <color>
🚨️ Property is nonstandard. Avoid using it.
The -webkit-border-before-style CSS property sets the style of the individual logical block start border in a single place in the style sheet.
Syntax: <'border-style'>
🚨️ Property is nonstandard. Avoid using it.
The -webkit-border-before-width CSS property sets the width of the individual logical block start border in a single place in the style sheet.
Syntax: <'border-width'>
Shorthand property for setting 'border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset' and 'border-image-repeat'. Omitted values are set to their initial values.
(Chrome, Safari 5)
Specifies the alignment of nested elements within an outer flexible box element.
(Chrome, Safari 3)
In webkit applications, -webkit-box-direction specifies whether a box lays out its contents normally (from the top or left edge), or in reverse (from the bottom or right edge).
(Chrome, Safari 3)
Specifies an element's flexibility.
(Chrome, Safari 3)
Flexible elements can be assigned to flex groups using the 'box-flex-group' property.
(Chrome, Safari 3)
Indicates the ordinal group the element belongs to. Elements with a lower ordinal group are displayed before those with a higher ordinal group.
(Chrome, Safari 3)
In webkit applications, -webkit-box-orient specifies whether a box lays out its contents horizontally or vertically.
(Chrome, Safari 3)
Specifies alignment of child elements within the current element in the direction of orientation.
(Chrome, Safari 3)
🚨️ Property is nonstandard. Avoid using it.
Defines a reflection of a border box.
(Edge 79, Safari 4, Chrome 4, Opera 15)
Syntax: [ above | below | right | left ]? <length>? <image>?
Box Model addition in CSS3.
(Chrome, Safari 3)
Describes the page/column break behavior before the generated box.
(Safari 7)
Describes the page/column break behavior before the generated box.
(Safari 7)
Describes the page/column break behavior inside the generated box.
(Safari 7)
Describes the page/column break behavior before the generated box.
(Chrome, Safari 3)
Describes the page/column break behavior before the generated box.
(Chrome, Safari 3)
Describes the page/column break behavior inside the generated box.
(Chrome, Safari 3)
Describes the optimal number of columns into which the content of the element will be flowed.
(Chrome, Safari 3)
Sets the gap between columns. If there is a column rule between columns, it will appear in the middle of the gap.
(Chrome, Safari 3)
This property is a shorthand for setting 'column-rule-width', 'column-rule-style', and 'column-rule-color' at the same place in the style sheet. Omitted values are set to their initial values.
(Chrome, Safari 3)
Sets the color of the column rule
(Chrome, Safari 3)
Sets the style of the rule between columns of an element.
(Chrome, Safari 3)
Sets the width of the rule between columns. Negative values are not allowed.
(Chrome, Safari 3)
Describes the page/column break behavior after the generated box.
(Chrome, Safari 3)
This property describes the width of columns in multicol elements.
(Chrome, Safari 3)
A shorthand property which sets both 'column-width' and 'column-count'.
(Chrome, Safari 3)
Processes an element’s rendering before it is displayed in the document, by applying one or more filter effects.
(Chrome 18, Opera 15, Safari 6)
Makes a block container a region and associates it with a named flow.
(Safari 6.1)
Places an element or its contents into a named flow.
(Safari 6.1)
This property provides low-level control over OpenType font features. It is intended as a way of providing access to font features that are not widely used but are needed for a particular use case.
(Chrome 16)
Controls whether hyphenation is allowed to create more break opportunities within a line of text.
(Safari 5.1)
Specifies line-breaking rules for CJK (Chinese, Japanese, and Korean) text.
(Chrome, Safari 3)
The -webkit-line-clamp CSS property allows limiting of the contents of a block container to the specified number of lines.
(Edge 17, Firefox 68, Safari 5, Chrome 6, Opera 15)
Syntax: none | <integer>
(Chrome, Safari 3)
(Chrome, Safari 3)
(Chrome, Safari 3)
(Chrome, Safari 3)
🚨️ Property is nonstandard. Avoid using it.
The mask CSS property alters the visibility of an element by either partially or fully hiding it. This is accomplished by either masking or clipping the image at specific points.
Syntax: [ <mask-reference> || <position> [ / <bg-size> ]? || <repeat-style> || [ <box> | border | padding | content | text ] || [ <box> | border | padding | content ] ]#
🚨️ Property is nonstandard. Avoid using it.
If a -webkit-mask-image is specified, -webkit-mask-attachment determines whether the mask image's position is fixed within the viewport, or scrolls along with its containing block.
(Safari 4, Chrome 1)
Syntax: <attachment>#
🚨️ Property is nonstandard. Avoid using it.
Determines the mask painting area, which determines the area that is affected by the mask.
(Chrome, Opera 15, Safari 4)
Syntax: [ <box> | border | padding | content | text ]#
🚨️ Property is nonstandard. Avoid using it.
The -webkit-mask-composite property specifies the manner in which multiple mask images applied to the same element are composited with one another. Mask images are composited in the opposite order that they are declared with the -webkit-mask-image property.
(Edge 18, Firefox 53, Safari 3.1, Chrome 1, Opera 15)
Syntax: <composite-style>#
🚨️ Property is nonstandard. Avoid using it.
Sets the mask layer image of an element.
(Chrome, Opera 15, Safari 4)
Syntax: <mask-reference>#
🚨️ Property is nonstandard. Avoid using it.
Specifies the mask positioning area.
(Chrome, Opera 15, Safari 4)
Syntax: [ <box> | border | padding | content ]#
🚨️ Property is nonstandard. Avoid using it.
The mask-position CSS property sets the initial position, relative to the mask position layer defined by mask-origin, for each defined mask image.
Syntax: <position>#
🚨️ Property is nonstandard. Avoid using it.
The -webkit-mask-position-x CSS property sets the initial horizontal position of a mask image.
(Edge 18, Firefox 49, Safari 3.1, Chrome 1, Opera 15)
Syntax: [ <length-percentage> | left | center | right ]#
🚨️ Property is nonstandard. Avoid using it.
The -webkit-mask-position-y CSS property sets the initial vertical position of a mask image.
(Edge 18, Firefox 49, Safari 3.1, Chrome 1, Opera 15)
Syntax: [ <length-percentage> | top | center | bottom ]#
🚨️ Property is nonstandard. Avoid using it.
Specifies how mask layer images are tiled after they have been sized and positioned.
(Chrome, Opera 15, Safari 4)
Syntax: <repeat-style>#
🚨️ Property is nonstandard. Avoid using it.
The -webkit-mask-repeat-x property specifies whether and how a mask image is repeated (tiled) horizontally.
(Edge 18, Safari 5, Chrome 3, Opera 15)
Syntax: repeat | no-repeat | space | round
🚨️ Property is nonstandard. Avoid using it.
The -webkit-mask-repeat-y property specifies whether and how a mask image is repeated (tiled) vertically.
(Edge 18, Safari 5, Chrome 3, Opera 15)
Syntax: repeat | no-repeat | space | round
🚨️ Property is nonstandard. Avoid using it.
Specifies the size of the mask layer images.
(Chrome, Opera 15, Safari 4)
Syntax: <bg-size>#
Defines the behavior of nonbreaking spaces within text.
(Chrome, Safari 3)
🚨️ Property is nonstandard. Avoid using it.
Specifies whether to use native-style scrolling in an overflow:scroll element.
(Chrome, Safari 5)
Syntax: auto | touch
(Chrome, Safari 3)
Applies the same transform as the perspective(<number>) transform function, except that it applies only to the positioned or transformed children of the element, not to the transform on the element itself.
(Chrome, Safari 4)
Establishes the origin for the perspective property. It effectively sets the X and Y position at which the viewer appears to be looking at the children of the element.
(Chrome, Safari 4)
The 'region-fragment' property controls the behavior of the last region associated with a named flow.
(Safari 7)
🚨️ Property is nonstandard. Avoid using it.
(Edge 12, Chrome 16, Opera 15)
Syntax: <color>
🚨️ Property is nonstandard. Avoid using it.
(Edge 12, Firefox 49, Safari 3, Chrome 1, Opera 15)
Syntax: <color>
Specifies a size adjustment for displaying text content in mobile browsers.
(Edge, Chrome, Safari 3)
🚨️ Property is nonstandard. Avoid using it.
(Edge 15, Firefox 49, Safari 3, Chrome 4, Opera 15)
Syntax: <length> || <color>
🚨️ Property is nonstandard. Avoid using it.
(Edge 15, Firefox 49, Safari 3, Chrome 1, Opera 15)
Syntax: <color>
🚨️ Property is nonstandard. Avoid using it.
(Edge 15, Firefox 49, Safari 3, Chrome 1, Opera 15)
Syntax: <length>
A two-dimensional transformation is applied to an element through the 'transform' property. This property contains a list of transform functions similar to those allowed by SVG.
(Chrome, Opera 12, Safari 3.1)
Establishes the origin of transformation for an element.
(Chrome, Opera 15, Safari 3.1)
The x coordinate of the origin for transforms applied to an element with respect to its border box.
(Chrome, Safari 3.1)
The y coordinate of the origin for transforms applied to an element with respect to its border box.
(Chrome, Safari 3.1)
The z coordinate of the origin for transforms applied to an element with respect to its border box.
(Chrome, Safari 4)
Defines how nested elements are rendered in 3D space.
(Chrome, Safari 4)
Shorthand property combines four of the transition properties into a single property.
(Chrome, Opera 12, Safari 5)
Defines when the transition will start. It allows a transition to begin execution some period of time from when it is applied.
(Chrome, Opera 12, Safari 5)
Specifies how long the transition from the old value to the new value should take.
(Chrome, Opera 12, Safari 5)
Specifies the name of the CSS property to which the transition is applied.
(Chrome, Opera 12, Safari 5)
Describes how the intermediate values used during a transition will be calculated.
(Chrome, Opera 12, Safari 5)
(Safari 3)
🚨️ Property is nonstandard. Avoid using it.
Determines whether a user can edit the content of an element.
(Chrome, Safari 3)
Syntax: read-only | read-write | read-write-plaintext-only
Controls the appearance of selection.
(Chrome, Safari 3)
Sets the color of the elements accent
(Edge 93, Firefox 92, Safari 15.4, Chrome 93, Opera 79)
Syntax: auto | <color>
@counter-style descriptor. Specifies the symbols used by the marker-construction algorithm specified by the system descriptor. Needs to be specified if the counter system is 'additive'.
(Firefox 33)
Syntax: [ <integer> && <symbol> ]#
Aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how 'justify-content' aligns individual items within the main-axis.
Syntax: normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>
Aligns flex items along the cross axis of the current line of the flex container.
Syntax: normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]
Allows the default alignment along the cross axis to be overridden for individual flex items.
Syntax: auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>
⚠️ Property is experimental. Be cautious when using it.️
The align-tracks CSS property sets the alignment in the masonry axis for grid containers that have masonry in their block axis.
(Firefox 77)
Syntax: [ normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position> ]#
Shorthand that resets all properties except 'direction' and 'unicode-bidi'.
(Edge 79, Firefox 27, Safari 9.1, Chrome 37, Opera 24)
Syntax: initial | inherit | unset | revert
Provides alternative text for assistive technology to replace the generated content of a ::before or ::after element.
(Safari 9)
Shorthand property combines six of the animation properties into a single property.
Syntax: <single-animation>#
Defines whether or not the animation should play in reverse on alternate cycles.
Syntax: <single-animation-direction>#
Defines the length of time that an animation takes to complete one cycle.
Syntax: <time>#
Defines what values are applied by the animation outside the time it is executing.
Syntax: <single-animation-fill-mode>#
Defines the number of times an animation cycle is played. The default value is one, meaning the animation will play from beginning to end once.
Syntax: <single-animation-iteration-count>#
Defines a list of animations that apply. Each name is used to select the keyframe at-rule that provides the property values for the animation.
Syntax: [ none | <keyframes-name> ]#
Defines whether the animation is running or paused.
Syntax: <single-animation-play-state>#
Specifies the names of one or more @scroll-timeline at-rules to describe the element's scroll animations.
(Firefox 97)
Syntax: <single-animation-timeline>#
Describes how the animation will progress over one cycle of its duration.
Syntax: <easing-function>#
⚠️ Property is experimental. Be cautious when using it.️
Changes the appearance of buttons and other controls to resemble native controls.
(Edge 84, Firefox 80, Safari 15.4, Chrome 84, Opera 70)
Syntax: none | auto | textfield | menulist-button | <compat-auto>
⚠️ Property is experimental. Be cautious when using it.️
Describes the ascent metric of a font.
Syntax: normal | <percentage>
⚠️ Property is experimental. Be cautious when using it.️
The aspect-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.
(Edge 88, Firefox 89, Safari 15, Chrome 88, Opera 74)
Syntax: auto | <ratio>
🚨️️️ Property is obsolete. Avoid using it.
In combination with elevation, the azimuth CSS property enables different audio sources to be positioned spatially for aural presentation. This is important in that it provides a natural way to tell several voices apart, as each can be positioned to originate at a different location on the sound stage. Stereo output produce a lateral sound stage, while binaural headphones and multi-speaker setups allow for a fully three-dimensional stage.
Syntax: <angle> | [ [ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards
The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.
(Edge 17, Firefox 70, Safari 9, Chrome 76, Opera 63)
Syntax: none | <filter-function-list>
Determines whether or not the 'back' side of a transformed element is visible when facing the viewer. With an identity transform, the front side of an element faces the viewer.
Syntax: visible | hidden
Shorthand property for setting most background properties at the same place in the style sheet.
Syntax: [ <bg-layer> , ]* <final-bg-layer>
Specifies whether the background images are fixed with regard to the viewport ('fixed') or scroll along with the element ('scroll') or its contents ('local').
Syntax: <attachment>#
Defines the blending mode of each background layer.
(Edge 79, Firefox 30, Safari 8, Chrome 35, Opera 22)
Syntax: <blend-mode>#
For elements rendered as a single box, specifies the background positioning area. For elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages) specifies which boxes 'box-decoration-break' operates on to determine the background positioning area(s).
Syntax: <box>#
Specifies the initial position of the background image(s) (after any resizing) within their corresponding background positioning area.
Syntax: <bg-position>#
⚠️ Property is experimental. Be cautious when using it.️
If background images have been specified, this property specifies their initial position (after any resizing) within their corresponding background positioning area.
Syntax: [ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#
⚠️ Property is experimental. Be cautious when using it.️
If background images have been specified, this property specifies their initial position (after any resizing) within their corresponding background positioning area.
Syntax: [ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#
Specifies how background images are tiled after they have been sized and positioned.
Syntax: <repeat-style>#
IE only. Used to extend behaviors of the browser.
(IE 6)
The bleed CSS at-rule descriptor, used with the @page at-rule, specifies the extent of the page bleed area outside the page box. This property only has effect if crop marks are enabled using the marks property.
Syntax: auto | <length>
Size of an element in the direction opposite that of the direction specified by 'writing-mode'.
(Edge 79, Firefox 41, Safari 12.1, Chrome 57, Opera 44)
Syntax: <'width'>
Shorthand property for setting border width, style, and color.
Syntax: <line-width> || <line-style> || <color>
The border-block CSS property is a shorthand property for setting the individual logical block border property values in a single place in the style sheet.
(Edge 87, Firefox 66, Safari 14.1, Chrome 87, Opera 73)
Syntax: <'border-top-width'> || <'border-top-style'> || <color>
The border-block-color CSS property defines the color of the logical block borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-color and border-bottom-color, or border-right-color and border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.
(Edge 87, Firefox 66, Safari 14.1, Chrome 87, Opera 73)
Syntax: <'border-top-color'>{1,2}
Logical 'border-bottom'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Edge 79, Firefox 41, Safari 12.1, Chrome 69, Opera 56)
Syntax: <'border-top-width'> || <'border-top-style'> || <color>
Logical 'border-bottom-color'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Edge 79, Firefox 41, Safari 12.1, Chrome 69, Opera 56)
Syntax: <'border-top-color'>
Logical 'border-bottom-style'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Edge 79, Firefox 41, Safari 12.1, Chrome 69, Opera 56)
Syntax: <'border-top-style'>
Logical 'border-bottom-width'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Edge 79, Firefox 41, Safari 12.1, Chrome 69, Opera 56)
Syntax: <'border-top-width'>
Logical 'border-top'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Edge 79, Firefox 41, Safari 12.1, Chrome 69, Opera 56)
Syntax: <'border-top-width'> || <'border-top-style'> || <color>
Logical 'border-top-color'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Edge 79, Firefox 41, Safari 12.1, Chrome 69, Opera 56)
Syntax: <'border-top-color'>
Logical 'border-top-style'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Edge 79, Firefox 41, Safari 12.1, Chrome 69, Opera 56)
Syntax: <'border-top-style'>
Logical 'border-top-width'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Edge 79, Firefox 41, Safari 12.1, Chrome 69, Opera 56)
Syntax: <'border-top-width'>
The border-block-style CSS property defines the style of the logical block borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-style and border-bottom-style, or border-left-style and border-right-style properties depending on the values defined for writing-mode, direction, and text-orientation.
(Edge 87, Firefox 66, Safari 14.1, Chrome 87, Opera 73)
Syntax: <'border-top-style'>
The border-block-width CSS property defines the width of the logical block borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width and border-bottom-width, or border-left-width, and border-right-width property depending on the values defined for writing-mode, direction, and text-orientation.
(Edge 87, Firefox 66, Safari 14.1, Chrome 87, Opera 73)
Syntax: <'border-top-width'>
Shorthand property for setting border width, style and color.
Syntax: <line-width> || <line-style> || <color>
Defines the radii of the bottom left outer border edge.
Syntax: <length-percentage>{1,2}
Defines the radii of the bottom right outer border edge.
Syntax: <length-percentage>{1,2}
The border-end-end-radius CSS property defines a logical border radius on an element, which maps to a physical border radius that depends on on the element's writing-mode, direction, and text-orientation.
(Edge 89, Firefox 66, Safari 15, Chrome 89, Opera 75)
Syntax: <length-percentage>{1,2}
The border-end-start-radius CSS property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction, and text-orientation.
(Edge 89, Firefox 66, Safari 15, Chrome 89, Opera 75)
Syntax: <length-percentage>{1,2}
Shorthand property for setting 'border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset' and 'border-image-repeat'. Omitted values are set to their initial values.
Syntax: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>
The values specify the amount by which the border image area extends beyond the border box on the top, right, bottom, and left sides respectively. If the fourth value is absent, it is the same as the second. If the third one is also absent, it is the same as the first. If the second one is also absent, it is the same as the first. Numbers represent multiples of the corresponding border-width.
Syntax: [ <length> | <number> ]{1,4}
Specifies how the images for the sides and the middle part of the border image are scaled and tiled. If the second keyword is absent, it is assumed to be the same as the first.
Syntax: [ stretch | repeat | round | space ]{1,2}
Specifies inward offsets from the top, right, bottom, and left edges of the image, dividing it into nine regions: four corners, four edges and a middle.
Syntax: <number-percentage>{1,4} && fill?
Specifies an image to use instead of the border styles given by the 'border-style' properties and as an additional background layer for the element. If the value is 'none' or if the image cannot be displayed, the border styles will be used.
Syntax: none | <image>
The four values of 'border-image-width' specify offsets that are used to divide the border image area into nine parts. They represent inward distances from the top, right, bottom, and left sides of the area, respectively.
Syntax: [ <length-percentage> | <number> | auto ]{1,4}
The border-inline CSS property is a shorthand property for setting the individual logical inline border property values in a single place in the style sheet.
(Edge 87, Firefox 66, Safari 14.1, Chrome 87, Opera 73)
Syntax: <'border-top-width'> || <'border-top-style'> || <color>
The border-inline-color CSS property defines the color of the logical inline borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-color and border-bottom-color, or border-right-color and border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.
(Edge 87, Firefox 66, Safari 14.1, Chrome 87, Opera 73)
Syntax: <'border-top-color'>{1,2}
Logical 'border-right'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Edge 79, Firefox 41, Safari 12.1, Chrome 69, Opera 56)
Syntax: <'border-top-width'> || <'border-top-style'> || <color>
Logical 'border-right-color'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Edge 79, Firefox 41, Safari 12.1, Chrome 69, Opera 56)
Syntax: <'border-top-color'>
Logical 'border-right-style'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Edge 79, Firefox 41, Safari 12.1, Chrome 69, Opera 56)
Syntax: <'border-top-style'>
Logical 'border-right-width'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Edge 79, Firefox 41, Safari 12.1, Chrome 69, Opera 56)
Syntax: <'border-top-width'>
Logical 'border-left'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Edge 79, Firefox 41, Safari 12.1, Chrome 69, Opera 56)
Syntax: <'border-top-width'> || <'border-top-style'> || <color>
Logical 'border-left-color'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Edge 79, Firefox 41, Safari 12.1, Chrome 69, Opera 56)
Syntax: <'border-top-color'>
Logical 'border-left-style'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Edge 79, Firefox 41, Safari 12.1, Chrome 69, Opera 56)
Syntax: <'border-top-style'>
Logical 'border-left-width'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Edge 79, Firefox 41, Safari 12.1, Chrome 69, Opera 56)
Syntax: <'border-top-width'>
The border-inline-style CSS property defines the style of the logical inline borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-style and border-bottom-style, or border-left-style and border-right-style properties depending on the values defined for writing-mode, direction, and text-orientation.
(Edge 87, Firefox 66, Safari 14.1, Chrome 87, Opera 73)
Syntax: <'border-top-style'>
The border-inline-width CSS property defines the width of the logical inline borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width and border-bottom-width, or border-left-width, and border-right-width property depending on the values defined for writing-mode, direction, and text-orientation.
(Edge 87, Firefox 66, Safari 14.1, Chrome 87, Opera 73)
Syntax: <'border-top-width'>
Shorthand property for setting border width, style and color
Syntax: <line-width> || <line-style> || <color>
Defines the radii of the outer border edge.
Syntax: <length-percentage>{1,4} [ / <length-percentage>{1,4} ]?
Shorthand property for setting border width, style and color
Syntax: <line-width> || <line-style> || <color>
The lengths specify the distance that separates adjoining cell borders. If one length is specified, it gives both the horizontal and vertical spacing. If two are specified, the first gives the horizontal spacing and the second the vertical spacing. Lengths may not be negative.
Syntax: <length> <length>?
The border-start-end-radius CSS property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction, and text-orientation.
(Edge 89, Firefox 66, Safari 15, Chrome 89, Opera 75)
Syntax: <length-percentage>{1,2}
The border-start-start-radius CSS property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's writing-mode, direction, and text-orientation.
(Edge 89, Firefox 66, Safari 15, Chrome 89, Opera 75)
Syntax: <length-percentage>{1,2}
Shorthand property for setting border width, style and color
Syntax: <line-width> || <line-style> || <color>
Defines the radii of the top right outer border edge.
Syntax: <length-percentage>{1,2}
Shorthand that sets the four 'border-*-width' properties. If it has four values, they set top, right, bottom and left in that order. If left is missing, it is the same as right; if bottom is missing, it is the same as top; if right is missing, it is the same as top.
Syntax: <line-width>{1,4}
Specifies how far an absolutely positioned box's bottom margin edge is offset above the bottom edge of the box's 'containing block'.
Syntax: <length> | <percentage> | auto
🚨️ Property is nonstandard. Avoid using it.
The box-align CSS property specifies how an element aligns its contents across its layout in a perpendicular direction. The effect of the property is only visible if there is extra space in the box.
(Edge 12, Firefox 1, Safari 3, Chrome 1, Opera 15)
Syntax: start | center | end | baseline | stretch
Specifies whether individual boxes are treated as broken pieces of one continuous box, or whether each box is individually wrapped with the border and padding.
(Edge 79, Firefox 32, Safari 7, Chrome 22, Opera 15)
Syntax: slice | clone
🚨️ Property is nonstandard. Avoid using it.
The box-direction CSS property specifies whether a box lays out its contents normally (from the top or left edge), or in reverse (from the bottom or right edge).
(Edge 12, Firefox 1, Safari 3, Chrome 1, Opera 15)
Syntax: normal | reverse | inherit
🚨️ Property is nonstandard. Avoid using it.
The -moz-box-flex and -webkit-box-flex CSS properties specify how a -moz-box or -webkit-box grows to fill the box that contains it, in the direction of the containing box's layout.
(Edge 12, Firefox 1, Safari 3, Chrome 1, Opera 15)
Syntax: <number>
🚨️ Property is nonstandard. Avoid using it.
The box-flex-group CSS property assigns the flexbox's child elements to a flex group.
(Safari 3, Chrome 1, Opera 15)
Syntax: <integer>
🚨️ Property is nonstandard. Avoid using it.
The box-lines CSS property determines whether the box may have a single or multiple lines (rows for horizontally oriented boxes, columns for vertically oriented boxes).
(Safari 3, Chrome 1, Opera 15)
Syntax: single | multiple
🚨️ Property is nonstandard. Avoid using it.
The box-ordinal-group CSS property assigns the flexbox's child elements to an ordinal group.
(Edge 12, Firefox 1, Safari 3, Chrome 1, Opera 15)
Syntax: <integer>
🚨️ Property is nonstandard. Avoid using it.
The box-orient CSS property specifies whether an element lays out its contents horizontally or vertically.
(Edge 12, Firefox 1, Safari 3, Chrome 1, Opera 15)
Syntax: horizontal | vertical | inline-axis | block-axis | inherit
🚨️ Property is nonstandard. Avoid using it.
The -moz-box-pack and -webkit-box-pack CSS properties specify how a -moz-box or -webkit-box packs its contents in the direction of its layout. The effect of this is only visible if there is extra space in the box.
(Edge 12, Firefox 1, Safari 3, Chrome 1, Opera 15)
Syntax: start | center | end | justify
Attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional 'inset' keyword. Omitted lengths are 0; omitted colors are a user agent chosen color.
Syntax: none | <shadow>#
Specifies the behavior of the 'width' and 'height' properties.
Syntax: content-box | border-box
Describes the page/column/region break behavior after the generated box.
Syntax: auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region
Describes the page/column/region break behavior before the generated box.
Syntax: auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region
Describes the page/column/region break behavior inside the principal box.
Syntax: auto | avoid | avoid-page | avoid-column | avoid-region
Specifies the position of the caption box with respect to the table box.
Syntax: top | bottom | block-start | block-end | inline-start | inline-end
Controls the color of the text insertion indicator.
(Edge 79, Firefox 53, Safari 11.1, Chrome 57, Opera 44)
Syntax: auto | <color>
Indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.
Syntax: none | left | right | both | inline-start | inline-end
Deprecated. Use the 'clip-path' property when support allows. Defines the visible portion of an element’s box.
Syntax: <shape> | auto
Specifies a clipping path where everything inside the path is visible and everything outside is clipped out.
Syntax: <clip-source> | [ <basic-shape> || <geometry-box> ] | none
Indicates the algorithm which is to be used to determine what parts of the canvas are included inside the shape.
(Edge, Chrome 5, Firefox 3, IE 10, Opera 9, Safari 6)
Specifies the color space for imaging operations performed via filter effects.
(Edge, Chrome 5, Firefox 3, IE 10, Opera 9, Safari 6)
The color-scheme CSS property allows an element to indicate which color schemes it can comfortably be rendered in.
(Edge 81, Firefox 96, Safari 13, Chrome 81, Opera 68)
Syntax: normal | [ light | dark | <custom-ident> ]+ && only?
Describes the optimal number of columns into which the content of the element will be flowed.
Syntax: <integer> | auto
In continuous media, this property will only be consulted if the length of columns has been constrained. Otherwise, columns will automatically be balanced.
Syntax: auto | balance | balance-all
Sets the gap between columns. If there is a column rule between columns, it will appear in the middle of the gap.
Syntax: normal | <length-percentage>
Shorthand for setting 'column-rule-width', 'column-rule-style', and 'column-rule-color' at the same place in the style sheet. Omitted values are set to their initial values.
Syntax: <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>
Sets the width of the rule between columns. Negative values are not allowed.
Syntax: <'border-width'>
A shorthand property which sets both 'column-width' and 'column-count'.
Syntax: <'column-width'> || <'column-count'>
Indicates that an element and its contents are, as much as possible, independent of the rest of the document tree.
(Edge 79, Firefox 69, Safari 15.4, Chrome 52, Opera 40)
Syntax: none | strict | content | [ size || layout || style || paint ]
Determines which page-based occurrence of a given element is applied to a counter or string value.
Syntax: normal | none | [ <content-replacement> | <content-list> ] [/ [ <string> | <counter> ]+ ]?
Controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed.
(Edge 85, Chrome 85, Opera 71)
Syntax: visible | auto | hidden
Manipulate the value of existing counters.
Syntax: [ <counter-name> <integer>? ]+ | none
Property accepts one or more names of counters (identifiers), each one optionally followed by an integer. The integer gives the value that the counter is set to on each occurrence of the element.
Syntax: [ <counter-name> <integer>? | <reversed-counter-name> <integer>? ]+ | none
The counter-set CSS property sets a CSS counter to a given value. It manipulates the value of existing counters, and will only create new counters if there isn't already a counter of the given name on the element.
(Edge 85, Firefox 68, Chrome 85, Opera 71)
Syntax: [ <counter-name> <integer>? ]+ | none
Allows control over cursor appearance in an element
Syntax: [ [ <url> [ <x> <y> ]? , ]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ]
⚠️ Property is experimental. Be cautious when using it.️
Describes the descent metric of a font.
Syntax: normal | <percentage>
Specifies the inline base direction or directionality of any bidi paragraph, embedding, isolate, or override established by the box. Note: for HTML content use the 'dir' attribute and 'bdo' element rather than this property.
Syntax: ltr | rtl
In combination with 'float' and 'position', determines the type of box or boxes that are generated for an element.
Syntax: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>
In the separated borders model, this property controls the rendering of borders and backgrounds around cells that have no visible content.
Syntax: show | hide
Deprecated. Use 'isolation' property instead when support allows. Specifies how the accumulation of the background image is managed.
@counter-style descriptor. Specifies a fallback counter style to be used when the current counter style can’t create a representation for a given counter value.
(Firefox 33)
Syntax: <counter-style-name>
Paints the interior of the given graphical element.
Specifies the opacity of the painting operation used to paint the interior the current object.
Indicates the algorithm (or winding rule) which is to be used to determine what parts of the canvas are included inside the shape.
Processes an element’s rendering before it is displayed in the document, by applying one or more filter effects.
(Edge 12, Firefox 35, Safari 9.1, Chrome 53, Opera 40)
Syntax: none | <filter-function-list>
Specifies the components of a flexible length: the flex grow factor and flex shrink factor, and the flex basis.
Syntax: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
Specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis.
Syntax: row | row-reverse | column | column-reverse
Specifies how flexbox items are placed in the flexbox.
Syntax: <'flex-direction'> || <'flex-wrap'>
Controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.
Syntax: nowrap | wrap | wrap-reverse
Specifies how a box should be floated. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned.
Syntax: left | right | none | inline-start | inline-end
Indicates what color to use to flood the current filter primitive subregion.
(Edge, Chrome 5, Firefox 3, IE 10, Opera 9, Safari 6)
Indicates what opacity to use to flood the current filter primitive subregion.
(Edge, Chrome 5, Firefox 3, IE 10, Opera 9, Safari 6)
Shorthand property for setting 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height', and 'font-family', at the same place in the style sheet. The syntax of this property is based on a traditional typographical shorthand notation to set multiple properties related to fonts.
Syntax: [ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar
⚠️ Property is experimental. Be cautious when using it.️
The font-display descriptor determines how a font face is displayed based on whether and when it is downloaded and ready to use.
Syntax: [ auto | block | swap | fallback | optional ]
Specifies a prioritized list of font family names or generic family names. A user agent iterates through the list of family names until it matches an available font that contains a glyph for the character to be rendered.
Syntax: <family-name>
Provides low-level control over OpenType font features. It is intended as a way of providing access to font features that are not widely used but are needed for a particular use case.
Syntax: normal | <feature-tag-value>#
Kerning is the contextual adjustment of inter-glyph spacing. This property controls metric kerning, kerning that utilizes adjustment data contained in the font.
(Edge 79, Firefox 32, Safari 9, Chrome 33, Opera 20)
Syntax: auto | normal | none
The value of 'normal' implies that when rendering with OpenType fonts the language of the document is used to infer the OpenType language system, used to select language specific features when rendering.
(Firefox 34)
Syntax: normal | <string>
The font-optical-sizing CSS property allows developers to control whether browsers render text with slightly differing visual representations to optimize viewing at different sizes, or not. This only works for fonts that have an optical size variation axis.
(Edge 17, Firefox 62, Safari 11, Chrome 79, Opera 66)
Syntax: auto | none
Indicates the desired height of glyphs from the font. For scalable fonts, the font-size is a scale factor applied to the EM unit of the font. (Note that certain glyphs may bleed outside their EM box.) For non-scalable fonts, the font-size is converted into absolute units and matched against the declared font-size of the font, using the same absolute coordinate space for both of the matched values.
Syntax: <absolute-size> | <relative-size> | <length-percentage>
Preserves the readability of text when font fallback occurs by adjusting the font-size so that the x-height is the same regardless of the font used.
(Edge 79, Firefox 40, Chrome 43, Opera 30)
Syntax: none | [ ex-height | cap-height | ch-width | ic-width | ic-height ]? [ from-font | <number> ]
🚨️ Property is nonstandard. Avoid using it.
The font-smooth CSS property controls the application of anti-aliasing when fonts are rendered.
(Edge 79, Firefox 25, Safari 4, Chrome 5, Opera 15)
Syntax: auto | never | always | <absolute-size> | <length>
Selects a normal, condensed, or expanded face from a font family.
Syntax: <font-stretch-absolute>{1,2}
Allows italic or oblique faces to be selected. Italic forms are generally cursive in nature while oblique faces are typically sloped versions of the regular face.
Syntax: normal | italic | oblique <angle>{0,2}
Controls whether user agents are allowed to synthesize bold or oblique font faces when a font family lacks bold or italic faces.
(Edge 97, Firefox 34, Safari 9, Chrome 97, Opera 83)
Syntax: none | [ weight || style || small-caps ]
Specifies variant representations of the font
Syntax: normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic(<feature-value-name>) || historical-forms || styleset(<feature-value-name>#) || character-variant(<feature-value-name>#) || swash(<feature-value-name>) || ornaments(<feature-value-name>) || annotation(<feature-value-name>) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby ]
For any given character, fonts can provide a variety of alternate glyphs in addition to the default glyph for that character. This property provides control over the selection of these alternate glyphs.
(Firefox 34, Safari 9.1)
Syntax: normal | [ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ]
Specifies control over capitalized forms.
(Edge 79, Firefox 34, Safari 9.1, Chrome 52, Opera 39)
Syntax: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps
Allows control of glyph substitute and positioning in East Asian text.
(Edge 79, Firefox 34, Safari 9.1, Chrome 63, Opera 50)
Syntax: normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]
Specifies control over which ligatures are enabled or disabled. A value of ‘normal’ implies that the defaults set by the font are used.
(Edge 79, Firefox 34, Safari 9.1, Chrome 34, Opera 21)
Syntax: normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]
Specifies control over numerical forms.
(Edge 79, Firefox 34, Safari 9.1, Chrome 52, Opera 39)
Syntax: normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]
The font-variation-settings CSS property provides low-level control over OpenType or TrueType font variations, by specifying the four letter axis names of the features you want to vary, along with their variation values.
(Edge 17, Firefox 62, Safari 11, Chrome 62, Opera 49)
Syntax: normal | [ <string> <number> ]#
Specifies weight of glyphs in the font, their degree of blackness or stroke thickness.
Syntax: <font-weight-absolute>{1,2}
⚠️ Property is experimental. Be cautious when using it.️
Allows authors to opt certain elements out of forced colors mode. This then restores the control of those values to CSS
(Edge 79, Chrome 89, IE 10)
Syntax: auto | none
The gap CSS property is a shorthand property for row-gap and column-gap specifying the gutters between grid rows and columns.
(Edge 84, Firefox 63, Safari 14.1, Chrome 84, Opera 70)
Syntax: <'row-gap'> <'column-gap'>?
Controls glyph orientation when the inline-progression-direction is horizontal.
Controls glyph orientation when the inline-progression-direction is vertical.
The grid CSS property is a shorthand property that sets all of the explicit grid properties ('grid-template-rows', 'grid-template-columns', and 'grid-template-areas'), and all the implicit grid properties ('grid-auto-rows', 'grid-auto-columns', and 'grid-auto-flow'), in a single declaration.
(Edge 16, Firefox 52, Safari 10.1, Chrome 57, Opera 44)
Syntax: <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
Determine a grid item’s size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement. Shorthand for 'grid-row-start', 'grid-column-start', 'grid-row-end', and 'grid-column-end'.
(Edge 16, Firefox 52, Safari 10.1, Chrome 57, Opera 44)
Syntax: <grid-line> [ / <grid-line> ]{0,3}
Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.
(Edge 16, Firefox 52, Safari 10.1, Chrome 57, Opera 44)
Syntax: [ row | column ] || dense
Shorthand for 'grid-column-start' and 'grid-column-end'.
(Edge 16, Firefox 52, Safari 10.1, Chrome 57, Opera 44)
Syntax: <grid-line> [ / <grid-line> ]?
Determine a grid item’s size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement.
(Edge 16, Firefox 52, Safari 10.1, Chrome 57, Opera 44)
Syntax: <grid-line>
🚨️️️ Property is obsolete. Avoid using it.
Specifies the gutters between grid columns. Replaced by 'column-gap' property.
(Firefox 52, Chrome 57, Safari 10.1, Opera 44)
Syntax: <length-percentage>
Determine a grid item’s size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement.
(Edge 16, Firefox 52, Safari 10.1, Chrome 57, Opera 44)
Syntax: <grid-line>
🚨️️️ Property is obsolete. Avoid using it.
Shorthand that specifies the gutters between grid columns and grid rows in one declaration. Replaced by 'gap' property.
(Firefox 52, Chrome 57, Safari 10.1, Opera 44)
Syntax: <'grid-row-gap'> <'grid-column-gap'>?
Shorthand for 'grid-row-start' and 'grid-row-end'.
(Edge 16, Firefox 52, Safari 10.1, Chrome 57, Opera 44)
Syntax: <grid-line> [ / <grid-line> ]?
Determine a grid item’s size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement.
(Edge 16, Firefox 52, Safari 10.1, Chrome 57, Opera 44)
Syntax: <grid-line>
🚨️️️ Property is obsolete. Avoid using it.
Specifies the gutters between grid rows. Replaced by 'row-gap' property.
(Firefox 52, Chrome 57, Safari 10.1, Opera 44)
Syntax: <length-percentage>
Determine a grid item’s size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement.
(Edge 16, Firefox 52, Safari 10.1, Chrome 57, Opera 44)
Syntax: <grid-line>
Shorthand for setting grid-template-columns, grid-template-rows, and grid-template-areas in a single declaration.
(Edge 16, Firefox 52, Safari 10.1, Chrome 57, Opera 44)
Syntax: none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
Specifies named grid areas, which are not associated with any particular grid item, but can be referenced from the grid-placement properties.
(Edge 16, Firefox 52, Safari 10.1, Chrome 57, Opera 44)
Syntax: none | <string>+
specifies, as a space-separated track list, the line names and track sizing functions of the grid.
Syntax: none | <track-list> | <auto-track-list> | subgrid <line-name-list>?
specifies, as a space-separated track list, the line names and track sizing functions of the grid.
Syntax: none | <track-list> | <auto-track-list> | subgrid <line-name-list>?
The hanging-punctuation CSS property specifies whether a punctuation mark should hang at the start or end of a line of text. Hanging punctuation may be placed outside the line box.
(Safari 10)
Syntax: none | [ first || [ force-end | allow-end ] || last ]
Specifies the height of the content area, padding area or border area (depending on 'box-sizing') of certain boxes.
Syntax: <viewport-length>{1,2}
A hyphenate character used at the end of a line.
(Edge 79, Firefox 98, Safari 5.1, Chrome 6, Opera 15)
Syntax: auto | <string>
Controls whether hyphenation is allowed to create more break opportunities within a line of text.
Syntax: none | manual | auto
Specifies an orthogonal rotation to be applied to an image before it is laid out.
(Edge 81, Firefox 26, Safari 13.1, Chrome 81, Opera 67)
Syntax: from-image | <angle> | [ <angle>? flip ]
Provides a hint to the user-agent about what aspects of an image are most important to preserve when the image is scaled, to aid the user-agent in the choice of an appropriate scaling algorithm.
(Edge 79, Firefox 3.6, Safari 6, Chrome 13, Opera 15)
Syntax: auto | crisp-edges | pixelated
⚠️ Property is experimental. Be cautious when using it.️
The image-resolution property specifies the intrinsic resolution of all raster images used in or on the element. It affects both content images (e.g. replaced elements and generated content) and decorative images (such as background-image). The intrinsic resolution of an image is used to determine the image’s intrinsic dimensions.
Syntax: [ from-image || <resolution> ] && snap?
🚨️️️ Property is obsolete. Avoid using it.
Controls the state of the input method editor for text fields.
(Edge 12, Firefox 3, IE 5)
Syntax: auto | normal | active | inactive | disabled
⚠️ Property is experimental. Be cautious when using it.️
Specifies the inherit flag of the custom property registration represented by the @property rule, controlling whether or not the property inherits by default.
Syntax: true | false
⚠️ Property is experimental. Be cautious when using it.️
The initial-letter CSS property specifies styling for dropped, raised, and sunken initial letters.
(Safari 9)
Syntax: normal | [ <number> <integer>? ]
⚠️ Property is experimental. Be cautious when using it.️
The initial-letter-align CSS property specifies the alignment of initial letters within a paragraph.
Syntax: [ auto | alphabetic | hanging | ideographic ]
⚠️ Property is experimental. Be cautious when using it.️
Specifies the initial value of the custom property registration represented by the @property rule, controlling the property’s initial value.
Syntax: <string>
Size of an element in the direction specified by 'writing-mode'.
(Edge 79, Firefox 41, Safari 12.1, Chrome 57, Opera 44)
Syntax: <'width'>
Enables or disables the obscuring a sensitive test input.
Syntax: auto | none
The inset CSS property defines the logical block and inline start and end offsets of an element, which map to physical offsets depending on the element's writing mode, directionality, and text orientation. It corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and text-orientation.
(Edge 87, Firefox 66, Safari 14.1, Chrome 87, Opera 73)
Syntax: <'top'>{1,4}
The inset-block CSS property defines the logical block start and end offsets of an element, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. It corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and text-orientation.
(Edge 87, Firefox 63, Safari 14.1, Chrome 87, Opera 73)
Syntax: <'top'>{1,2}
The inset-block-end CSS property defines the logical block end offset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. It corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation.
(Edge 87, Firefox 63, Safari 14.1, Chrome 87, Opera 73)
Syntax: <'top'>
The inset-block-start CSS property defines the logical block start offset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. It corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation.
(Edge 87, Firefox 63, Safari 14.1, Chrome 87, Opera 73)
Syntax: <'top'>
The inset-inline CSS property defines the logical block start and end offsets of an element, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. It corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and text-orientation.
(Edge 87, Firefox 63, Safari 14.1, Chrome 87, Opera 73)
Syntax: <'top'>{1,2}
The inset-inline-end CSS property defines the logical inline end inset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. It corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation.
(Edge 87, Firefox 63, Safari 14.1, Chrome 87, Opera 73)
Syntax: <'top'>
The inset-inline-start CSS property defines the logical inline start inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. It corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation.
(Edge 87, Firefox 63, Safari 14.1, Chrome 87, Opera 73)
Syntax: <'top'>
In CSS setting to 'isolate' will turn the element into a stacking context. In SVG, it defines whether an element is isolated or not.
(Edge 79, Firefox 36, Safari 8, Chrome 41, Opera 30)
Syntax: auto | isolate
Aligns flex items along the main axis of the current line of the flex container.
Syntax: normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]
Defines the default justify-self for all items of the box, giving them the default way of justifying each box along the appropriate axis
Syntax: normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ]
Defines the way of justifying a box inside its container along the appropriate axis.
Syntax: auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ]
⚠️ Property is experimental. Be cautious when using it.️
The justify-tracks CSS property sets the alignment in the masonry axis for grid containers that have masonry in their inline axis
(Firefox 77)
Syntax: [ normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ] ]#
Indicates whether the user agent should adjust inter-glyph spacing based on kerning tables that are included in the relevant font or instead disable auto-kerning and set inter-character spacing to a specific length.
Specifies how far an absolutely positioned box's left margin edge is offset to the right of the left edge of the box's 'containing block'.
Syntax: <length> | <percentage> | auto
Specifies the minimum, maximum, and optimal spacing between grapheme clusters.
Syntax: normal | <length>
Defines the color of the light source for filter primitives 'feDiffuseLighting' and 'feSpecularLighting'.
(Edge, Chrome 5, Firefox 3, IE 10, Opera 9, Safari 6)
Specifies what set of line breaking restrictions are in effect within the element.
Syntax: auto | loose | normal | strict | anywhere
⚠️ Property is experimental. Be cautious when using it.️
The line-clamp property allows limiting the contents of a block container to the specified number of lines; remaining content is fragmented away and neither rendered nor measured. Optionally, it also allows inserting content into the last line box to indicate the continuity of truncated/interrupted content.
Syntax: none | <integer>
⚠️ Property is experimental. Be cautious when using it.️
Describes the line-gap metric of a font.
Syntax: normal | <percentage>
Determines the block-progression dimension of the text content area of an inline box.
Syntax: normal | <number> | <length> | <percentage>
⚠️ Property is experimental. Be cautious when using it.️
The line-height-step CSS property defines the step units for line box heights. When the step unit is positive, line box heights are rounded up to the closest multiple of the unit. Negative values are invalid.
(Edge 79, Chrome 60, Opera 47)
Syntax: <length>
Shorthand for setting 'list-style-type', 'list-style-position' and 'list-style-image'
Syntax: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>
Sets the image that will be used as the list item marker. When the image is available, it will replace the marker set with the 'list-style-type' marker.
Syntax: <image> | none
Specifies the position of the '::marker' pseudo-element's box in the list item.
Syntax: inside | outside
Used to construct the default contents of a list item’s marker
Syntax: <counter-style> | <string> | none
Shorthand property to set values for the thickness of the margin area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. Negative values for margin properties are allowed, but there may be implementation-specific limits.
Syntax: [ <length> | <percentage> | auto ]{1,4}
The margin-block CSS property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
(Edge 87, Firefox 66, Safari 14.1, Chrome 87, Opera 73)
Syntax: <'margin-left'>{1,2}
Logical 'margin-bottom'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Edge 87, Firefox 41, Safari 12.1, Chrome 87, Opera 73)
Syntax: <'margin-left'>
Logical 'margin-top'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Edge 87, Firefox 41, Safari 12.1, Chrome 87, Opera 73)
Syntax: <'margin-left'>
Shorthand property to set values for the thickness of the margin area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. Negative values for margin properties are allowed, but there may be implementation-specific limits..
Syntax: <length> | <percentage> | auto
The margin-inline CSS property defines the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
(Edge 87, Firefox 66, Safari 14.1, Chrome 87, Opera 73)
Syntax: <'margin-left'>{1,2}
Logical 'margin-right'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Edge 87, Firefox 41, Safari 12.1, Chrome 87, Opera 73)
Syntax: <'margin-left'>
Logical 'margin-left'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Edge 87, Firefox 41, Safari 12.1, Chrome 87, Opera 73)
Syntax: <'margin-left'>
Shorthand property to set values for the thickness of the margin area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. Negative values for margin properties are allowed, but there may be implementation-specific limits..
Syntax: <length> | <percentage> | auto
Shorthand property to set values for the thickness of the margin area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. Negative values for margin properties are allowed, but there may be implementation-specific limits..
Syntax: <length> | <percentage> | auto
Shorthand property to set values for the thickness of the margin area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. Negative values for margin properties are allowed, but there may be implementation-specific limits..
Syntax: <length> | <percentage> | auto
⚠️ Property is experimental. Be cautious when using it.️
The margin-trim property allows the container to trim the margins of its children where they adjoin the container’s edges.
Syntax: none | in-flow | all
Specifies the marker symbol that shall be used for all points on the sets the value for all vertices on the given ‘path’ element or basic shape.
Specifies the marker that will be drawn at the last vertices of the given markable element.
Specifies the marker that will be drawn at all vertices except the first and last.
Specifies the marker that will be drawn at the first vertices of the given markable element.
The marks CSS at-rule descriptor, used with the @page at-rule, adds crop and/or cross marks to the presentation of the document. Crop marks indicate where the page should be cut. Cross marks are used to align sheets.
Syntax: none | [ crop || cross ]
The mask CSS property alters the visibility of an element by either partially or fully hiding it. This is accomplished by either masking or clipping the image at specific points.
(Edge 79, Firefox 2, Safari 3.1, Chrome 1, Opera 15)
Syntax: <mask-layer>#
The mask-border CSS property lets you create a mask along the edge of an element's border.
This property is a shorthand for mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, mask-border-repeat, and mask-border-mode. As with all shorthand properties, any omitted sub-values will be set to their initial value.
(Edge 79, Safari 3.1, Chrome 1, Opera 15)
Syntax: <'mask-border-source'> || <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? || <'mask-border-repeat'> || <'mask-border-mode'>
The mask-border-mode CSS property specifies the blending mode used in a mask border.
Syntax: luminance | alpha
The mask-border-outset CSS property specifies the distance by which an element's mask border is set out from its border box.
(Edge 79, Safari 3.1, Chrome 1, Opera 15)
Syntax: [ <length> | <number> ]{1,4}
The mask-border-repeat CSS property defines how the edge regions of a source image are adjusted to fit the dimensions of an element's mask border.
(Edge 79, Safari 3.1, Chrome 1, Opera 15)
Syntax: [ stretch | repeat | round | space ]{1,2}
The mask-border-slice CSS property divides the image specified by mask-border-source into regions. These regions are used to form the components of an element's mask border.
(Edge 79, Safari 3.1, Chrome 1, Opera 15)
Syntax: <number-percentage>{1,4} fill?
The mask-border-source CSS property specifies the source image used to create an element's mask border.
The mask-border-slice property is used to divide the source image into regions, which are then dynamically applied to the final mask border.
(Edge 79, Safari 3.1, Chrome 1, Opera 15)
Syntax: none | <image>
The mask-border-width CSS property specifies the width of an element's mask border.
(Edge 79, Safari 3.1, Chrome 1, Opera 15)
Syntax: [ <length-percentage> | <number> | auto ]{1,4}
The mask-clip CSS property determines the area, which is affected by a mask. The painted content of an element must be restricted to this area.
(Edge 79, Firefox 53, Safari 15.4, Chrome 1, Opera 15)
Syntax: [ <geometry-box> | no-clip ]#
The mask-composite CSS property represents a compositing operation used on the current mask layer with the mask layers below it.
(Edge 18, Firefox 53, Safari 15.4)
Syntax: <compositing-operator>#
Sets the mask layer image of an element.
(Edge 79, Firefox 53, Safari 15.4, Chrome 1, Opera 15)
Syntax: <mask-reference>#
Indicates whether the mask layer image is treated as luminance mask or alpha mask.
(Firefox 53, Safari 15.4)
Syntax: <masking-mode>#
Specifies the mask positioning area.
(Edge 79, Firefox 53, Safari 15.4, Chrome 1, Opera 15)
Syntax: <geometry-box>#
Specifies how mask layer images are positioned.
(Edge 79, Firefox 53, Safari 15.4, Chrome 1, Opera 15)
Syntax: <position>#
Specifies how mask layer images are tiled after they have been sized and positioned.
(Edge 79, Firefox 53, Safari 15.4, Chrome 1, Opera 15)
Syntax: <repeat-style>#
Specifies the size of the mask layer images.
(Edge 79, Firefox 53, Safari 15.4, Chrome 4, Opera 15)
Syntax: <bg-size>#
Defines whether the content of the <mask> element is treated as as luminance mask or alpha mask.
(Edge 79, Firefox 35, Safari 7, Chrome 24, Opera 15)
Syntax: luminance | alpha
⚠️ Property is experimental. Be cautious when using it.️
The masonry-auto-flow CSS property modifies how items are placed when using masonry in CSS Grid Layout.
Syntax: [ pack | next ] || [ definite-first | ordered ]
The math-style property indicates whether MathML equations should render with normal or compact height.
(Firefox 83, Safari 14.1, Chrome 83)
Syntax: normal | compact
Maximum size of an element in the direction opposite that of the direction specified by 'writing-mode'.
(Edge 79, Firefox 41, Safari 12.1, Chrome 57, Opera 44)
Syntax: <'max-width'>
Allows authors to constrain content height to a certain range.
Syntax: <viewport-length>
Maximum size of an element in the direction specified by 'writing-mode'.
(Edge 79, Firefox 41, Safari 12.1, Chrome 57, Opera 44)
Syntax: <'max-width'>
⚠️ Property is experimental. Be cautious when using it.️
The max-lines property forces a break after a set number of lines
Syntax: none | <integer>
Allows authors to constrain content width to a certain range.
Syntax: <viewport-length>
The max-zoom CSS descriptor sets the maximum zoom factor of a document defined by the @viewport at-rule. The browser will not zoom in any further than this, whether automatically or at the user's request.
A zoom factor of 1.0 or 100% corresponds to no zooming. Larger values are zoomed in. Smaller values are zoomed out.
Syntax: auto | <number> | <percentage>
Minimal size of an element in the direction opposite that of the direction specified by 'writing-mode'.
(Edge 79, Firefox 41, Safari 12.1, Chrome 57, Opera 44)
Syntax: <'min-width'>
Allows authors to constrain content height to a certain range.
Syntax: <viewport-length>
Minimal size of an element in the direction specified by 'writing-mode'.
(Edge 79, Firefox 41, Safari 12.1, Chrome 57, Opera 44)
Syntax: <'min-width'>
Allows authors to constrain content width to a certain range.
Syntax: <viewport-length>
The min-zoom CSS descriptor sets the minimum zoom factor of a document defined by the @viewport at-rule. The browser will not zoom out any further than this, whether automatically or at the user's request.
A zoom factor of 1.0 or 100% corresponds to no zooming. Larger values are zoomed in. Smaller values are zoomed out.
Syntax: auto | <number> | <percentage>
Defines the formula that must be used to mix the colors with the backdrop.
(Edge 79, Firefox 32, Safari 8, Chrome 41, Opera 28)
Syntax: <blend-mode>
Shorthand property for setting 'motion-path', 'motion-offset' and 'motion-rotation'.
(Chrome 46, Opera 33)
A distance that describes the position along the specified motion path.
(Chrome 46, Opera 33)
Specifies the motion path the element gets positioned at.
(Chrome 46, Opera 33)
Defines the direction of the element while positioning along the motion path.
(Chrome 46, Opera 33)
Provides an way to control directional focus navigation.
(Opera 9.5)
Provides an input-method-neutral way of specifying the sequential navigation order (also known as 'tabbing order').
(Opera 9.5)
Provides an way to control directional focus navigation.
(Opera 9.5)
Provides an way to control directional focus navigation.
(Opera 9.5)
Provides an way to control directional focus navigation.
(Opera 9.5)
@counter-style descriptor. Defines how to alter the representation when the counter value is negative.
(Firefox 33)
Syntax: <symbol> <symbol>?
Specifies how the contents of a replaced element should be scaled relative to the box established by its used height and width.
(Edge 79, Firefox 36, Safari 10, Chrome 32, Opera 19)
Syntax: fill | contain | cover | none | scale-down
Determines the alignment of the replaced element inside its box.
(Edge 79, Firefox 36, Safari 10, Chrome 32, Opera 19)
Syntax: <position>
The offset CSS property is a shorthand property for animating an element along a defined path.
(Edge 79, Firefox 72, Chrome 55, Opera 42)
Syntax: [ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?
Defines an anchor point of the box positioned along the path. The anchor point specifies the point of the box which is to be considered as the point that is moved along the path.
(Firefox 72)
Syntax: auto | <position>
Logical 'bottom'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Firefox 41)
Logical 'top'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Firefox 41)
The offset-distance CSS property specifies a position along an offset-path.
(Edge 79, Firefox 72, Chrome 55, Opera 42)
Syntax: <length-percentage>
Logical 'right'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Firefox 41)
Logical 'left'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Firefox 41)
The offset-path CSS property specifies the offset path where the element gets positioned. The exact element’s position on the offset path is determined by the offset-distance property. An offset path is either a specified path with one or multiple sub-paths or the geometry of a not-styled basic shape. Each shape or path must define an initial position for the computed value of "0" for offset-distance and an initial direction which specifies the rotation of the object to the initial position.
In this specification, a direction (or rotation) of 0 degrees is equivalent to the direction of the positive x-axis in the object’s local coordinate system. In other words, a rotation of 0 degree points to the right side of the UA if the object and its ancestors have no transformation applied.
(Edge 79, Firefox 72, Chrome 55, Opera 45)
Syntax: none | ray( [ <angle> && <size> && contain? ] ) | <path()> | <url> | [ <basic-shape> || <geometry-box> ]
⚠️ Property is experimental. Be cautious when using it.️
Specifies the initial position of the offset path. If position is specified with static, offset-position would be ignored.
Syntax: auto | <position>
The offset-rotate CSS property defines the direction of the element while positioning along the offset path.
(Edge 79, Firefox 72, Chrome 56, Opera 43)
Syntax: [ auto | reverse ] || <angle>
Opacity of an element's text, where 1 is opaque and 0 is entirely transparent.
Syntax: <alpha-value>
Controls the order in which children of a flex container appear within the flex container, by assigning them to ordinal groups.
Syntax: <integer>
The orientation CSS @media media feature can be used to apply styles based on the orientation of the viewport (or the page box, for paged media).
Syntax: auto | portrait | landscape
Specifies the minimum number of line boxes in a block container that must be left in a fragment before a fragmentation break.
(Edge 12, Safari 1.3, Chrome 25, IE 8, Opera 9.2)
Syntax: <integer>
Shorthand property for 'outline-style', 'outline-width', and 'outline-color'.
Syntax: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ]
Offset the outline and draw it beyond the border edge.
(Edge 15, Firefox 1.5, Safari 1.2, Chrome 1, Opera 9.5)
Syntax: <length>
Shorthand for setting 'overflow-x' and 'overflow-y'.
Syntax: [ visible | hidden | clip | scroll | auto ]{1,2}
The overflow-anchor CSS property provides a way to opt out browser scroll anchoring behavior which adjusts scroll position to minimize content shifts.
(Edge 79, Firefox 66, Chrome 56, Opera 43)
Syntax: auto | none
The overflow-block CSS media feature can be used to test how the output device handles content that overflows the initial containing block along the block axis.
(Firefox 69)
Syntax: visible | hidden | clip | scroll | auto
🚨️ Property is nonstandard. Avoid using it.
The overflow-clip-box CSS property specifies relative to which box the clipping happens when there is an overflow. It is short hand for the overflow-clip-box-inline and overflow-clip-box-block properties.
(Firefox 29)
Syntax: padding-box | content-box
The overflow-clip-margin CSS property determines how far outside its bounds an element with overflow: clip may be painted before being clipped.
(Edge 90, Chrome 90, Opera 76)
Syntax: <visual-box> || <length [0,∞]>
The overflow-inline CSS media feature can be used to test how the output device handles content that overflows the initial containing block along the inline axis.
(Firefox 69)
Syntax: visible | hidden | clip | scroll | auto
Specifies whether the UA may break within a word to prevent overflow when an otherwise-unbreakable string is too long to fit within the line box.
Syntax: normal | break-word | anywhere
Specifies the handling of overflow in the horizontal direction.
Syntax: visible | hidden | clip | scroll | auto
Specifies the handling of overflow in the vertical direction.
Syntax: visible | hidden | clip | scroll | auto
The overscroll-behavior CSS property is shorthand for the overscroll-behavior-x and overscroll-behavior-y properties, which allow you to control the browser's scroll overflow behavior — what happens when the boundary of a scrolling area is reached.
(Edge 18, Firefox 59, Chrome 63, Opera 50)
Syntax: [ contain | none | auto ]{1,2}
The overscroll-behavior-block CSS property sets the browser's behavior when the block direction boundary of a scrolling area is reached.
(Edge 79, Firefox 73, Chrome 77, Opera 64)
Syntax: contain | none | auto
The overscroll-behavior-inline CSS property sets the browser's behavior when the inline direction boundary of a scrolling area is reached.
(Edge 79, Firefox 73, Chrome 77, Opera 64)
Syntax: contain | none | auto
The overscroll-behavior-x CSS property is allows you to control the browser's scroll overflow behavior — what happens when the boundary of a scrolling area is reached — in the x axis direction.
(Edge 18, Firefox 59, Chrome 63, Opera 50)
Syntax: contain | none | auto
The overscroll-behavior-y CSS property is allows you to control the browser's scroll overflow behavior — what happens when the boundary of a scrolling area is reached — in the y axis direction.
(Edge 18, Firefox 59, Chrome 63, Opera 50)
Syntax: contain | none | auto
@counter-style descriptor. Specifies a “fixed-width” counter style, where representations shorter than the pad value are padded with a particular <symbol>
(Firefox 33)
Syntax: <integer> && <symbol>
Shorthand property to set values for the thickness of the padding area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative.
Syntax: [ <length> | <percentage> ]{1,4}
The padding-block CSS property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.
(Edge 87, Firefox 66, Safari 14.1, Chrome 87, Opera 73)
Syntax: <'padding-left'>{1,2}
Logical 'padding-bottom'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Edge 87, Firefox 41, Safari 12.1, Chrome 87, Opera 73)
Syntax: <'padding-left'>
Logical 'padding-top'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Edge 87, Firefox 41, Safari 12.1, Chrome 87, Opera 73)
Syntax: <'padding-left'>
Shorthand property to set values for the thickness of the padding area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative.
Syntax: <length> | <percentage>
The padding-inline CSS property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.
(Edge 87, Firefox 66, Safari 14.1, Chrome 87, Opera 73)
Syntax: <'padding-left'>{1,2}
Logical 'padding-right'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Edge 87, Firefox 41, Safari 12.1, Chrome 87, Opera 73)
Syntax: <'padding-left'>
Logical 'padding-left'. Mapping depends on the parent element’s 'writing-mode', 'direction', and 'text-orientation'.
(Edge 87, Firefox 41, Safari 12.1, Chrome 87, Opera 73)
Syntax: <'padding-left'>
Shorthand property to set values for the thickness of the padding area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative.
Syntax: <length> | <percentage>
Shorthand property to set values for the thickness of the padding area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative.
Syntax: <length> | <percentage>
Shorthand property to set values for the thickness of the padding area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative.
Syntax: <length> | <percentage>
Defines rules for page breaks after an element.
Syntax: auto | always | avoid | left | right | recto | verso
Defines rules for page breaks before an element.
Syntax: auto | always | avoid | left | right | recto | verso
Controls the order that the three paint operations that shapes and text are rendered with: their fill, their stroke and any markers they might have.
(Edge 17, Firefox 60, Safari 8, Chrome 35, Opera 22)
Syntax: normal | [ fill || stroke || markers ]
Applies the same transform as the perspective(<number>) transform function, except that it applies only to the positioned or transformed children of the element, not to the transform on the element itself.
Syntax: none | <length>
Establishes the origin for the perspective property. It effectively sets the X and Y position at which the viewer appears to be looking at the children of the element.
Syntax: <position>
The place-content CSS shorthand property sets both the align-content and justify-content properties.
(Edge 79, Firefox 45, Safari 9, Chrome 59, Opera 46)
Syntax: <'align-content'> <'justify-content'>?
The CSS place-items shorthand property sets both the align-items and justify-items properties. The first value is the align-items property value, the second the justify-items one. If the second value is not present, the first value is also used for it.
(Edge 79, Firefox 45, Safari 11, Chrome 59, Opera 46)
Syntax: <'align-items'> <'justify-items'>?
The place-self CSS property is a shorthand property sets both the align-self and justify-self properties. The first value is the align-self property value, the second the justify-self one. If the second value is not present, the first value is also used for it.
(Edge 79, Firefox 45, Safari 11, Chrome 59, Opera 46)
Syntax: <'align-self'> <'justify-self'>?
Specifies under what circumstances a given element can be the target element for a pointer event.
Syntax: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.
Syntax: static | relative | absolute | sticky | fixed
@counter-style descriptor. Specifies a <symbol> that is prepended to the marker representation.
(Firefox 33)
Syntax: <symbol>
Defines what optimization the user agent is allowed to do when adjusting the appearance for an output device.
(Edge 79, Firefox 97, Safari 15.4, Chrome 17, Opera 15)
Syntax: economy | exact
Specifies quotation marks for any number of embedded quotations.
Syntax: none | auto | [ <string> <string> ]+
@counter-style descriptor. Defines the ranges over which the counter style is defined.
(Firefox 33)
Syntax: [ [ <integer> | infinite ]{2} ]# | auto
Specifies whether or not an element is resizable by the user, and if so, along which axis/axes.
(Edge 79, Firefox 4, Safari 3, Chrome 1, Opera 12.1)
Syntax: none | both | horizontal | vertical | block | inline
Specifies how far an absolutely positioned box's right margin edge is offset to the left of the right edge of the box's 'containing block'.
Syntax: <length> | <percentage> | auto
The rotate CSS property allows you to specify rotation transforms individually and independently of the transform property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform value.
(Firefox 72, Safari 14.1)
Syntax: none | <angle> | [ x | y | z | <number>{3} ] && <angle>
The row-gap CSS property specifies the gutter between grid rows.
(Edge 84, Firefox 63, Safari 14.1, Chrome 84, Opera 70)
Syntax: normal | <length-percentage>
⚠️ Property is experimental. Be cautious when using it.️
Specifies how text is distributed within the various ruby boxes when their contents do not exactly fill their respective boxes.
(Firefox 38)
Syntax: start | center | space-between | space-around
⚠️ Property is experimental. Be cautious when using it.️
This property controls how ruby annotation boxes should be rendered when there are more than one in a ruby container box: whether each pair should be kept separate, the annotations should be collapsed and rendered as a group, or the separation should be determined based on the space available.
Syntax: separate | collapse | auto
Determines whether, and on which side, ruby text is allowed to partially overhang any adjacent text in addition to its own base, when the ruby text is wider than the ruby base.
(Firefox 10, IE 5)
⚠️ Property is experimental. Be cautious when using it.️
Used by the parent of elements with display: ruby-text to control the position of the ruby text with respect to its base.
(Edge 84, Firefox 38, Safari 7, Chrome 84, Opera 70)
Syntax: [ alternate || [ over | under ] ] | inter-character
Determines whether, and on which side, ruby text is allowed to partially overhang any adjacent text in addition to its own base, when the ruby text is wider than the ruby base.
(Firefox 10)
The scale CSS property allows you to specify scale transforms individually and independently of the transform property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform value.
(Firefox 72, Safari 14.1)
Syntax: none | <number>{1,3}
Specifies the scrolling behavior for a scrolling box, when scrolling happens due to navigation or CSSOM scrolling APIs.
(Edge 79, Firefox 36, Safari 15.4, Chrome 61, Opera 48)
Syntax: auto | smooth
The scroll-margin property is a shorthand property which sets all of the scroll-margin longhands, assigning values much like the margin property does for the margin-* longhands.
(Edge 79, Firefox 90, Safari 14.1, Chrome 69, Opera 56)
Syntax: <length>{1,4}
The scroll-margin-block property is a shorthand property which sets the scroll-margin longhands in the block dimension.
(Edge 79, Firefox 68, Safari 14.1, Chrome 69, Opera 56)
Syntax: <length>{1,2}
The scroll-margin-block-end property defines the margin of the scroll snap area at the end of the block dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.
(Edge 79, Firefox 68, Safari 14.1, Chrome 69, Opera 56)
Syntax: <length>
The scroll-margin-block-start property defines the margin of the scroll snap area at the start of the block dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.
(Edge 79, Firefox 68, Safari 14.1, Chrome 69, Opera 56)
Syntax: <length>
The scroll-margin-bottom property defines the bottom margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.
(Edge 79, Firefox 68, Safari 14.1, Chrome 69, Opera 56)
Syntax: <length>
The scroll-margin-inline property is a shorthand property which sets the scroll-margin longhands in the inline dimension.
(Edge 79, Firefox 68, Safari 14.1, Chrome 69, Opera 56)
Syntax: <length>{1,2}
The scroll-margin-inline-end property defines the margin of the scroll snap area at the end of the inline dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.
(Edge 79, Firefox 68, Safari 14.1, Chrome 69, Opera 56)
Syntax: <length>
The scroll-margin-inline-start property defines the margin of the scroll snap area at the start of the inline dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.
(Edge 79, Firefox 68, Safari 14.1, Chrome 69, Opera 56)
Syntax: <length>
The scroll-margin-left property defines the left margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.
(Edge 79, Firefox 68, Safari 14.1, Chrome 69, Opera 56)
Syntax: <length>
The scroll-margin-right property defines the right margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.
(Edge 79, Firefox 68, Safari 14.1, Chrome 69, Opera 56)
Syntax: <length>
The scroll-margin-top property defines the top margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.
(Edge 79, Firefox 68, Safari 14.1, Chrome 69, Opera 56)
Syntax: <length>
The scroll-padding property is a shorthand property which sets all of the scroll-padding longhands, assigning values much like the padding property does for the padding-* longhands.
(Edge 79, Firefox 68, Safari 14.1, Chrome 69, Opera 56)
Syntax: [ auto | <length-percentage> ]{1,4}
The scroll-padding-block property is a shorthand property which sets the scroll-padding longhands for the block dimension.
(Edge 79, Firefox 68, Safari 15, Chrome 69, Opera 56)
Syntax: [ auto | <length-percentage> ]{1,2}
The scroll-padding-block-end property defines offsets for the end edge in the block dimension of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targeted element and the edges of the scrollport.
(Edge 79, Firefox 68, Safari 15, Chrome 69, Opera 56)
Syntax: auto | <length-percentage>
The scroll-padding-block-start property defines offsets for the start edge in the block dimension of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targeted element and the edges of the scrollport.
(Edge 79, Firefox 68, Safari 15, Chrome 69, Opera 56)
Syntax: auto | <length-percentage>
The scroll-padding-bottom property defines offsets for the bottom of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targeted element and the edges of the scrollport.
(Edge 79, Firefox 68, Safari 14.1, Chrome 69, Opera 56)
Syntax: auto | <length-percentage>
The scroll-padding-inline property is a shorthand property which sets the scroll-padding longhands for the inline dimension.
(Edge 79, Firefox 68, Safari 15, Chrome 69, Opera 56)
Syntax: [ auto | <length-percentage> ]{1,2}
The scroll-padding-inline-end property defines offsets for the end edge in the inline dimension of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targeted element and the edges of the scrollport.
(Edge 79, Firefox 68, Safari 15, Chrome 69, Opera 56)
Syntax: auto | <length-percentage>
The scroll-padding-inline-start property defines offsets for the start edge in the inline dimension of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targeted element and the edges of the scrollport.
(Edge 79, Firefox 68, Safari 15, Chrome 69, Opera 56)
Syntax: auto | <length-percentage>
The scroll-padding-left property defines offsets for the left of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targeted element and the edges of the scrollport.
(Edge 79, Firefox 68, Safari 14.1, Chrome 69, Opera 56)
Syntax: auto | <length-percentage>
The scroll-padding-right property defines offsets for the right of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targeted element and the edges of the scrollport.
(Edge 79, Firefox 68, Safari 14.1, Chrome 69, Opera 56)
Syntax: auto | <length-percentage>
The scroll-padding-top property defines offsets for the top of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targeted element and the edges of the scrollport.
(Edge 79, Firefox 68, Safari 14.1, Chrome 69, Opera 56)
Syntax: auto | <length-percentage>
The scroll-snap-align property specifies the box’s snap position as an alignment of its snap area (as the alignment subject) within its snap container’s snapport (as the alignment container). The two values specify the snapping alignment in the block axis and inline axis, respectively. If only one value is specified, the second value defaults to the same value.
(Edge 79, Firefox 68, Safari 11, Chrome 69, Opera 56)
Syntax: [ none | start | end | center ]{1,2}
🚨️️️ Property is obsolete. Avoid using it.
Defines the x and y coordinate within the element which will align with the nearest ancestor scroll container’s snap-destination for the respective axis.
(Firefox 39)
Syntax: none | <position>#
🚨️️️ Property is obsolete. Avoid using it.
Define the x and y coordinate within the scroll container’s visual viewport which element snap points will align with.
(Firefox 39)
Syntax: <position>
🚨️️️ Property is obsolete. Avoid using it.
Defines the positioning of snap points along the x axis of the scroll container it is applied to.
(Firefox 39, Safari 9)
Syntax: none | repeat( <length-percentage> )
🚨️️️ Property is obsolete. Avoid using it.
Defines the positioning of snap points along the y axis of the scroll container it is applied to.
(Firefox 39, Safari 9)
Syntax: none | repeat( <length-percentage> )
The scroll-snap-stop CSS property defines whether the scroll container is allowed to "pass over" possible snap positions.
(Edge 79, Safari 15, Chrome 75, Opera 62)
Syntax: normal | always
Defines how strictly snap points are enforced on the scroll container.
Syntax: none | [ x | y | block | inline | both ] [ mandatory | proximity ]?
🚨️️️ Property is obsolete. Avoid using it.
The scroll-snap-type-x CSS property defines how strictly snap points are enforced on the horizontal axis of the scroll container in case there is one.
Specifying any precise animations or physics used to enforce those snap points is not covered by this property but instead left up to the user agent.
(Firefox 39, Safari 9)
Syntax: none | mandatory | proximity
🚨️️️ Property is obsolete. Avoid using it.
The scroll-snap-type-y CSS property defines how strictly snap points are enforced on the vertical axis of the scroll container in case there is one.
Specifying any precise animations or physics used to enforce those snap points is not covered by this property but instead left up to the user agent.
(Firefox 39)
Syntax: none | mandatory | proximity
Determines the color of the top and left edges of the scroll box and scroll arrows of a scroll bar.
(IE 5)
Determines the color of the main elements of a scroll bar, which include the scroll box, track, and scroll arrows.
(IE 5)
The scrollbar-color CSS property sets the color of the scrollbar track and thumb.
(Firefox 64)
Syntax: auto | <color>{2}
The scrollbar-gutter CSS property allows authors to reserve space for the scrollbar, preventing unwanted layout changes as the content grows while also avoiding unnecessary visuals when scrolling isn't needed.
(Edge 94, Firefox 97, Chrome 94, Opera 80)
Syntax: auto | stable && both-edges?
Determines the color of the top and left edges of the scroll box and scroll arrows of a scroll bar.
(IE 5)
Determines the color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar.
(IE 5)
Determines the color of the track element of a scroll bar.
(IE 6)
The scrollbar-width property allows the author to set the maximum thickness of an element’s scrollbars when they are shown.
(Firefox 64)
Syntax: auto | thin | none
Defines the alpha channel threshold used to extract the shape using an image. A value of 0.5 means that the shape will enclose all the pixels that are more than 50% opaque.
(Edge 79, Firefox 62, Safari 10.1, Chrome 37, Opera 24)
Syntax: <alpha-value>
Adds a margin to a 'shape-outside'. This defines a new shape that is the smallest contour that includes all the points that are the 'shape-margin' distance outward in the perpendicular direction from a point on the underlying shape.
(Edge 79, Firefox 62, Safari 10.1, Chrome 37, Opera 24)
Syntax: <length-percentage>
Specifies an orthogonal rotation to be applied to an image before it is laid out.
(Edge 79, Firefox 62, Safari 10.1, Chrome 37, Opera 24)
Syntax: none | [ <shape-box> || <basic-shape> ] | <image>
Provides hints about what tradeoffs to make as it renders vector graphics elements such as <path> elements and basic shapes such as circles and rectangles.
The size CSS at-rule descriptor, used with the @page at-rule, defines the size and orientation of the box which is used to represent a page. Most of the time, this size corresponds to the target size of the printed page if applicable.
(Chrome, Opera 8)
Syntax: <length>{1,2} | auto | [ <page-size> || [ portrait | landscape ] ]
⚠️ Property is experimental. Be cautious when using it.️
A multiplier for glyph outlines and metrics of a font.
Syntax: <percentage>
The speak-as descriptor specifies how a counter symbol constructed with a given @counter-style will be represented in the spoken form. For example, an author can specify a counter symbol to be either spoken as its numerical value or just represented with an audio cue.
Syntax: auto | bullets | numbers | words | spell-out | <counter-style-name>
@font-face descriptor. Specifies the resource containing font data. It is required, whether the font is downloadable or locally installed.
Syntax: [ <url> [ format( <string># ) ]? | local( <family-name> ) ]#
Indicates what color to use at that gradient stop.
Defines the opacity of a given gradient stop.
Paints along the outline of the given graphical element.
Controls the pattern of dashes and gaps used to stroke paths.
Specifies the distance into the dash pattern to start the dash.
Specifies the shape to be used at the end of open subpaths when they are stroked.
Specifies the shape to be used at the corners of paths or basic shapes when they are stroked.
When two line segments meet at a sharp angle and miter joins have been specified for 'stroke-linejoin', it is possible for the miter to extend far beyond the thickness of the line stroking the path.
Specifies the opacity of the painting operation used to stroke the current object.
Specifies the width of the stroke on the current object.
@counter-style descriptor. Specifies a <symbol> that is appended to the marker representation.
(Firefox 33)
Syntax: <symbol>
@counter-style descriptor. Specifies the symbols used by the marker-construction algorithm specified by the system descriptor.
(Firefox 33)
Syntax: <symbol>+
⚠️ Property is experimental. Be cautious when using it.️
Specifies the syntax of the custom property registration represented by the @property rule, controlling how the property’s value is parsed at computed value time.
Syntax: <string>
@counter-style descriptor. Specifies which algorithm will be used to construct the counter’s representation based on the counter value.
(Firefox 33)
Syntax: cyclic | numeric | alphabetic | symbolic | additive | [ fixed <integer>? ] | [ extends <counter-style-name> ]
Determines the width of the tab character (U+0009), in space characters (U+0020), when rendered.
(Edge 79, Firefox 91, Safari 7, Chrome 21, Opera 15)
Syntax: <integer> | <length>
Controls the algorithm used to lay out the table cells, rows, and columns.
Syntax: auto | fixed
Describes how inline contents of a block are horizontally aligned if the contents do not completely fill the line box.
Syntax: start | end | left | right | center | justify | match-parent
Describes how the last line of a block or a line right before a forced line break is aligned when 'text-align' is set to 'justify'.
(Edge 12, Firefox 49, Chrome 47, IE 5.5, Opera 34)
Syntax: auto | start | end | left | right | center | justify
Used to align (start-, middle- or end-alignment) a string of text relative to a given point.
The text-combine-upright CSS property specifies the combination of multiple characters into the space of a single character. If the combined text is wider than 1em, the user agent must fit the contents within 1em. The resulting composition is treated as a single upright glyph for layout and decoration. This property only has an effect in vertical writing modes.
This is used to produce an effect that is known as tate-chū-yoko (縦中横) in Japanese, or as 直書橫向 in Chinese.
Syntax: none | all | [ digits <integer>? ]
Decorations applied to font used for an element's text.
Syntax: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> || <'text-decoration-thickness'>
Specifies the color of text decoration (underlines overlines, and line-throughs) set on the element with text-decoration-line.
(Edge 79, Firefox 36, Safari 12.1, Chrome 57, Opera 44)
Syntax: <color>
Specifies what line decorations, if any, are added to the element.
(Edge 79, Firefox 36, Safari 12.1, Chrome 57, Opera 44)
Syntax: none | [ underline || overline || line-through || blink ] | spelling-error | grammar-error
⚠️ Property is experimental. Be cautious when using it.️
The text-decoration-skip CSS property specifies what parts of the element’s content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.
(Safari 12.1, Chrome 57, Opera 44)
Syntax: none | [ objects || [ spaces | [ leading-spaces || trailing-spaces ] ] || edges || box-decoration ]
The text-decoration-skip-ink CSS property specifies how overlines and underlines are drawn when they pass over glyph ascenders and descenders.
(Edge 79, Firefox 70, Safari 15.4, Chrome 64, Opera 50)
Syntax: auto | all | none
Specifies the line style for underline, line-through and overline text decoration.
(Edge 79, Firefox 36, Safari 12.1, Chrome 57, Opera 44)
Syntax: solid | double | dotted | dashed | wavy
The text-decoration-thickness CSS property sets the thickness, or width, of the decoration line that is used on text in an element, such as a line-through, underline, or overline.
(Edge 89, Firefox 70, Safari 12.1, Chrome 89, Opera 75)
Syntax: auto | from-font | <length> | <percentage>
The text-emphasis CSS property is a shorthand property for setting text-emphasis-style and text-emphasis-color in one declaration. This property will apply the specified emphasis mark to each character of the element's text, except separator characters, like spaces, and control characters.
(Edge 99, Firefox 46, Safari 7, Chrome 99, Opera 15)
Syntax: <'text-emphasis-style'> || <'text-emphasis-color'>
The text-emphasis-color CSS property defines the color used to draw emphasis marks on text being rendered in the HTML document. This value can also be set and reset using the text-emphasis shorthand.
(Edge 99, Firefox 46, Safari 7, Chrome 99, Opera 15)
Syntax: <color>
The text-emphasis-position CSS property describes where emphasis marks are drawn at. The effect of emphasis marks on the line height is the same as for ruby text: if there isn't enough place, the line height is increased.
(Edge 99, Firefox 46, Safari 7, Chrome 99, Opera 15)
Syntax: [ over | under ] && [ right | left ]
The text-emphasis-style CSS property defines the type of emphasis used. It can also be set, and reset, using the text-emphasis shorthand.
(Edge 99, Firefox 46, Safari 7, Chrome 99, Opera 15)
Syntax: none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string>
Specifies the indentation applied to lines of inline content in a block. The indentation only affects the first line of inline content in the block unless the 'hanging' keyword is specified, in which case it affects all lines except the first.
Syntax: <length-percentage> && hanging? && each-line?
Selects the justification algorithm used when 'text-align' is set to 'justify'. The property applies to block containers, but the UA may (but is not required to) also support it on inline elements.
(Edge 12, Firefox 55, Chrome 32, IE 11, Opera 19)
Syntax: auto | inter-character | inter-word | none
Specifies the orientation of text within a line.
(Edge 79, Firefox 41, Safari 14, Chrome 48, Opera 35)
Syntax: mixed | upright | sideways
Text can overflow for example when it is prevented from wrapping.
Syntax: [ clip | ellipsis | <string> ]{1,2}
The creator of SVG content might want to provide a hint to the implementation about what tradeoffs to make as it renders text. The ‘text-rendering’ property provides these hints.
(Edge 79, Firefox 1, Safari 5, Chrome 4, Opera 15)
Syntax: auto | optimizeSpeed | optimizeLegibility | geometricPrecision
Enables shadow effects to be applied to the text of the element.
Syntax: none | <shadow-t>#
⚠️ Property is experimental. Be cautious when using it.️
The text-size-adjust CSS property controls the text inflation algorithm used on some smartphones and tablets. Other browsers will ignore this property.
(Edge 79, Chrome 54, Opera 41)
Syntax: none | auto | <percentage>
Controls capitalization effects of an element’s text.
Syntax: none | capitalize | uppercase | lowercase | full-width | full-size-kana
The text-underline-offset CSS property sets the offset distance of an underline text decoration line (applied using text-decoration) from its original position.
(Edge 87, Firefox 70, Safari 12.1, Chrome 87, Opera 73)
Syntax: auto | <length> | <percentage>
Sets the position of an underline specified on the same element: it does not affect underlines specified by ancestor elements. This property is typically used in vertical writing contexts such as in Japanese documents where it often desired to have the underline appear 'over' (to the right of) the affected run of text
Syntax: auto | from-font | [ under || [ left | right ] ]
Specifies how far an absolutely positioned box's top margin edge is offset below the top edge of the box's 'containing block'.
Syntax: <length> | <percentage> | auto
Determines whether touch input may trigger default behavior supplied by user agent.
Syntax: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation
A two-dimensional transformation is applied to an element through the 'transform' property. This property contains a list of transform functions similar to those allowed by SVG.
Syntax: none | <transform-list>
The transform-box CSS property defines the layout box to which the transform and transform-origin properties relate.
(Edge 79, Firefox 55, Safari 11, Chrome 64, Opera 51)
Syntax: content-box | border-box | fill-box | stroke-box | view-box
Establishes the origin of transformation for an element.
Syntax: [ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?
Defines how nested elements are rendered in 3D space.
(Edge 12, Firefox 16, Safari 9, Chrome 36, Opera 23)
Syntax: flat | preserve-3d
Shorthand property combines four of the transition properties into a single property.
Syntax: <single-transition>#
Defines when the transition will start. It allows a transition to begin execution some period of time from when it is applied.
Syntax: <time>#
Specifies how long the transition from the old value to the new value should take.
Syntax: <time>#
Specifies the name of the CSS property to which the transition is applied.
Syntax: none | <single-transition-property>#
Describes how the intermediate values used during a transition will be calculated.
Syntax: <easing-function>#
The translate CSS property allows you to specify translation transforms individually and independently of the transform property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform value.
(Firefox 72, Safari 14.1)
Syntax: none | <length-percentage> [ <length-percentage> <length>? ]?
The level of embedding with respect to the bidirectional algorithm.
Syntax: normal | embed | isolate | bidi-override | isolate-override | plaintext
@font-face descriptor. Defines the set of Unicode codepoints that may be supported by the font face for which it is declared.
Syntax: <unicode-range>#
The user-zoom CSS descriptor controls whether or not the user can change the zoom factor of a document defined by @viewport.
Syntax: zoom | fixed
Affects the vertical positioning of the inline boxes generated by an inline-level element inside a line box.
Syntax: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>
The border-block-style CSS property defines the style of the logical block borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation.
Syntax: auto | contain | cover
Specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the ‘display’ property to ‘none’ to suppress box generation altogether).
Syntax: visible | hidden | collapse
Specifies how whitespace is handled in an element.
Syntax: normal | pre | nowrap | pre-wrap | pre-line | break-spaces
Specifies the minimum number of line boxes of a block container that must be left in a fragment after a break.
(Edge 12, Safari 1.3, Chrome 25, IE 8, Opera 9.2)
Syntax: <integer>
Specifies the width of the content area, padding area or border area (depending on 'box-sizing') of certain boxes.
Syntax: <viewport-length>{1,2}
Provides a rendering hint to the user agent, stating what kinds of changes the author expects to perform on the element.
(Edge 79, Firefox 36, Safari 9.1, Chrome 36, Opera 24)
Syntax: auto | <animateable-feature>#
Specifies line break opportunities for non-CJK scripts.
Syntax: normal | break-all | keep-all | break-word
Specifies whether the UA may break within a word to prevent overflow when an otherwise-unbreakable string is too long to fit.
Syntax: normal | break-word
This is a shorthand property for both 'direction' and 'block-progression'.
Syntax: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
For a positioned box, the 'z-index' property specifies the stack level of the box in the current stacking context and whether the box establishes a local stacking context.
Syntax: auto | <integer>
Non-standard. Specifies the magnification scale of the object. See 'transform: scale()' for a standards-based alternative.
(Edge 12, Safari 3.1, Chrome 1, IE 5.5, Opera 15)
Syntax: auto | <number> | <percentage>
Shorthand property combines six of the animation properties into a single property.
(Firefox 9)