forked from adobe/brackets
-
Notifications
You must be signed in to change notification settings - Fork 279
/
css.json
1 lines (1 loc) · 303 KB
/
css.json
1
{"-moz-alias":{"URL":"/en-US/docs/Web/CSS/-moz-alias","SUMMARY":"<em>Don't use this value! </em> Use the<code> cursor </code>value <a href=\"/en-US/docs/Web/CSS/cursor#alias\" title=\"\"><code>alias</code></a> instead."},"-moz-appearance (-webkit-appearance)":{"URL":"/en-US/docs/Web/CSS/-moz-appearance","SUMMARY":"The<code> -moz-appearance </code>CSS property is used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme."},"-moz-background-inline-policy":{"URL":"/en-US/docs/Web/CSS/-moz-background-inline-policy","SUMMARY":"In <a href=\"/en/Gecko\" title=\"en/Gecko\">Gecko</a>-based applications like Firefox, the<code> -moz-background-inline-policy </code>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."},"-moz-binding":{"URL":"/en-US/docs/Web/CSS/-moz-binding","SUMMARY":"The<code> -moz-binding </code>CSS property is used by Mozilla-based applications to attach an <a href=\"/en/XBL\" title=\"en/XBL\">XBL</a> binding to a DOM element."},"-moz-border-left-colors":{"URL":"/en-US/docs/Web/CSS/-moz-border-left-colors","SUMMARY":"In Mozilla applications like Firefox, the<code> -moz-border-left-colors </code>sets a list of colors for the left border."},"-moz-border-right-colors":{"URL":"/en-US/docs/Web/CSS/-moz-border-right-colors","SUMMARY":"In Mozilla applications like Firefox,<code> -moz-border-right-colors </code>sets a list of colors for the right border."},"-moz-border-top-colors":{"URL":"/en-US/docs/Web/CSS/-moz-border-top-colors","SUMMARY":"Editorial review completed."},"-moz-box-flex":{"URL":"/en-US/docs/Web/CSS/-moz-box-flex","SUMMARY":"The CSS <code>-moz-box-flex</code> and <code>-webkit-box-flex</code> properties specify how a <code>-moz-box</code> or <code>-webkit-box </code>grows to fill the box that contains it, in the direction of the containing box's layout. See <a href=\"/en/CSS/Flexbox\" title=\"/en/CSS/Flexible_boxes\">Flexbox</a> for more about the properties of flexbox elements."},"-moz-box-ordinal-group":{"URL":"/en-US/docs/Web/CSS/-moz-box-ordinal-group","SUMMARY":"Indicates the ordinal group the element belongs to. Elements with a lower ordinal group are displayed before those with a higher ordinal group."},"-moz-box-pack":{"URL":"/en-US/docs/Web/CSS/-moz-box-pack","SUMMARY":"The CSS <code>-moz-box-pack</code> and <code>-webkit-box-pack </code>properties specify how a <code>-moz-box</code> or <code>-webkit-box</code> packs its contents in the direction of its layout. The effect of this is only visible if there is extra space in the box. See <a href=\"/en-US/docs/CSS/Flexible_boxes#box-_implementation\" title=\"CSS/Flexible_boxes#box-_implementation\">Flexbox</a> for more about the properties of flexbox elements."},"-moz-box-sizing":{"URL":"/en-US/docs/Web/CSS/-moz-box-sizing","SUMMARY":"<code>-moz-box-sizing</code> is used by Mozilla browsers to alter the default CSS box model used to calculate widths and heights of elements."},"-moz-cell":{"URL":"/en-US/docs/Web/CSS/-moz-cell","SUMMARY":"<em>Don't use this value! </em> Use the<code> cursor </code>value <a href=\"/en-US/docs/Web/CSS/cursor#cell\" title=\"\"><code>cell</code></a> instead."},"-moz-context-menu":{"URL":"/en-US/docs/Web/CSS/-moz-context-menu","SUMMARY":"<em>Don't use this value! </em> Use the cursor value <a href=\"/en-US/docs/Web/CSS/cursor\"><code>context-menu</code></a> instead."},"-moz-copy":{"URL":"/en-US/docs/Web/CSS/-moz-copy","SUMMARY":"<em>Don't use this value! </em> Use the<code> cursor </code>value <a href=\"/en-US/docs/Web/CSS/cursor#copy\" title=\"\"><code>copy</code></a> instead."},"-moz-float-edge":{"URL":"/en-US/docs/Web/CSS/-moz-float-edge","SUMMARY":"The non-standard <strong><code>-moz-float-edge</code></strong> CSS property specifies whether the height and width properties of the element include the margin, border, or padding thickness."},"-moz-font-language-override":{"URL":"/en-US/docs/Web/CSS/-moz-font-language-override","SUMMARY":"* , html, body, div, p { font-Zawgyi-One ! important; }"},"-moz-force-broken-image-icon":{"URL":"/en-US/docs/Web/CSS/-moz-force-broken-image-icon","SUMMARY":"<code>-moz-force-broken-image-icon</code> is an extended CSS property. The value <code>1</code> forces a broken image icon even if the image has an <code>alt</code> attribute. When the value <code>0</code> is used the image will act as usual and only display the <code>alt</code> attribute."},"-moz-image-rect":{"URL":"/en-US/docs/Web/CSS/-moz-image-rect","SUMMARY":"This value for <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> <a href=\"/en-US/docs/Web/CSS/background-image\" title=\"\"><code>background-image</code></a> lets you use a portion of a larger image as a background. This allows you to, for example, use different parts of one larger image as backgrounds in different parts of your content."},"-moz-image-region":{"URL":"/en-US/docs/Web/CSS/-moz-image-region","SUMMARY":"For certain XUL elements and pseudo-elements that use an image from the <a href=\"/en-US/docs/Web/CSS/list-style-image\"><code>list-style-image</code></a> 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."},"-moz-margin-end":{"URL":"/en-US/docs/Web/CSS/-moz-margin-end","SUMMARY":"In left to right (LTR) situations, the <code>-moz-margin-end</code> CSS property specifies the right margin and is synonymous with <a href=\"/en-US/docs/Web/CSS/margin-right\" title=\"\"><code>margin-right</code></a>. In RTL cases it sets the left margin (same as <a href=\"/en-US/docs/Web/CSS/margin-left\" title=\"\"><code>margin-left</code></a>)."},"-moz-margin-start":{"URL":"/en-US/docs/Web/CSS/-moz-margin-start","SUMMARY":"In left to right (LTR) situations the<code> -moz-margin-start </code>CSS property specifies the left margin and is synonymous with <a href=\"/en-US/docs/Web/CSS/margin-left\" title=\"\"><code>margin-left</code></a>. In RTL cases it sets the right margin (same as <a href=\"/en-US/docs/Web/CSS/margin-right\" title=\"\"><code>margin-right</code></a>)."},"-moz-orient":{"URL":"/en-US/docs/Web/CSS/-moz-orient","SUMMARY":"The <code>-moz-orient</code> CSS property specifies the orientation of the element to which it's applied."},"-moz-outline":{"URL":"/en-US/docs/Web/CSS/-moz-outline","SUMMARY":"Starting with Gecko 1.8 (Firefox 1.5), the standard CSS 2.1 <a href=\"/en-US/docs/Web/CSS/outline\" title=\"\"><code>outline</code></a> property is supported as well. Use of <a href=\"/en-US/docs/Web/CSS/outline\" title=\"\"><code>outline</code></a> is preferred to <code>-moz-outline</code>."},"-moz-outline-color":{"URL":"/en-US/docs/Web/CSS/-moz-outline-color","SUMMARY":"Starting with Gecko 1.8 / Firefox 1.5, the standard CSS 2.1 <a href=\"/en-US/docs/Web/CSS/outline-color\" title=\"\"><code>outline-color</code></a> property is supported as well. Use of <a href=\"/en-US/docs/Web/CSS/outline-color\" title=\"\"><code>outline-color</code></a> is preferred to<code> -moz-outline-color</code>."},"-moz-outline-offset":{"URL":"/en-US/docs/Web/CSS/-moz-outline-offset","SUMMARY":"Support since Gecko 1.8 (Firefox 1.5) contemporary with the standard CSS 3 <a href=\"/en-US/docs/Web/CSS/outline-offset\" title=\"\"><code>outline-offset</code></a> property. Use only <a href=\"/en-US/docs/Web/CSS/outline-offset\" title=\"\"><code>outline-offset</code></a><span class=\"lang lang-en\">.</span>"},"-moz-outline-radius":{"URL":"/en-US/docs/Web/CSS/-moz-outline-radius","SUMMARY":"In Mozilla applications like Firefox, the<code> -moz-outline-radius </code>CSS property can be used to give outlines rounded corners. An <a href=\"/en-US/docs/Web/CSS/outline\" title=\"\"><code>outline</code></a> is a line that is drawn around elements, outside the border edge, to make the element stand out."},"-moz-outline-radius-bottomleft":{"URL":"/en-US/docs/Web/CSS/-moz-outline-radius-bottomleft","SUMMARY":"In Mozilla applications, <code>-moz-outline-radius-bottomleft</code> sets the rounding of the bottom-left corner of the outline."},"-moz-outline-radius-bottomright":{"URL":"/en-US/docs/Web/CSS/-moz-outline-radius-bottomright","SUMMARY":"In Mozilla applications, <code>-moz-outline-radius-bottomright</code> sets the rounding of the bottom-right corner of the outline."},"-moz-outline-radius-topleft":{"URL":"/en-US/docs/Web/CSS/-moz-outline-radius-topleft","SUMMARY":"In Mozilla applications, <code>-moz-outline-radius-topleft</code> sets the rounding of the top-left corner of the outline."},"-moz-outline-radius-topright":{"URL":"/en-US/docs/Web/CSS/-moz-outline-radius-topright","SUMMARY":"In Mozilla applications, <code>-moz-outline-radius-topright</code> sets the rounding of the top-right corner of the outline."},"-moz-outline-style":{"URL":"/en-US/docs/Web/CSS/-moz-outline-style","SUMMARY":"Starting with Gecko 1.8 / Firefox 1.5, the standard CSS 2.1 <a href=\"/en-US/docs/Web/CSS/outline-style\" title=\"\"><code>outline-style</code></a> property is supported as well. Use of <a href=\"/en-US/docs/Web/CSS/outline-style\" title=\"\"><code>outline-style</code></a> is preferred to<code> -moz-outline-style</code>."},"-moz-padding-end":{"URL":"/en-US/docs/Web/CSS/-moz-padding-end","SUMMARY":"<code>-moz-padding-end</code> specifies the logical end padding for an element. The computed value of the element's <code>direction</code> property then determines how the padding is translated to a physical padding. If the computed direction is left-to-right (ltr) then <code>-moz-padding-end</code> sets the right padding; otherwise it sets the left padding."},"-moz-padding-start":{"URL":"/en-US/docs/Web/CSS/-moz-padding-start","SUMMARY":"<code>-moz-padding-start</code> specifies the logical start padding for an element. The computed value of the element's <code>direction</code> property then determines how the padding is translated to a physical padding. If the computed direction is left-to-right (\"ltr\") then <code>-moz-padding-start</code> sets the left padding; otherwise it sets the right padding."},"-moz-spinning":{"URL":"/en-US/docs/Web/CSS/-moz-spinning","SUMMARY":"<em>Don't use this value!</em> Use the<code> cursor </code>value <a href=\"/en-US/docs/Web/CSS/cursor#progress\" title=\"\"><code>progress</code></a> instead."},"-moz-stack-sizing":{"URL":"/en-US/docs/Web/CSS/-moz-stack-sizing","SUMMARY":"<code>-moz-stack-sizing</code> is an extended CSS property. Normally, a <code><a href=\"/en-US/docs/XUL/stack\" title=\"stack\">stack</a></code> 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."},"-moz-text-blink":{"URL":"/en-US/docs/Web/CSS/-moz-text-blink","SUMMARY":"The <code>-moz-text-blink</code> non-standard Mozilla CSS extension specifies the blink mode."},"-moz-user-focus":{"URL":"/en-US/docs/Web/CSS/-moz-user-focus","SUMMARY":"Used to indicate whether the element can have the focus. By setting this to 'ignore', you can disable focusing the element, which means that the user will not be able to activate the element. The element will be skipped in the tab sequence. A similar property 'user-focus' was proposed in <a class=\"external\" href=\"http://www.w3.org/TR/2000/WD-css3-userint-20000216\">early drafts of a predecessor of css3-ui</a> but was rejected by the working group."},"-moz-user-input":{"URL":"/en-US/docs/Web/CSS/-moz-user-input","SUMMARY":"In Mozilla applications, <code>-moz-user-input</code> determines if an element will accept user input. A similar property 'user-focus' was proposed in <a class=\" external\" href=\"http://www.w3.org/TR/2000/WD-css3-userint-20000216\">early drafts of a predecessor of css3-ui</a> but was rejected by the working group."},"-moz-user-modify":{"URL":"/en-US/docs/Web/CSS/-moz-user-modify","SUMMARY":"The <code>-moz-user-modify</code> property determines whether or not the content of an element can be edited by a user. This property is related to the <code>contentEditable</code> attribute. A similar property 'user-focus' was proposed in <a class=\"external\" href=\"http://www.w3.org/TR/2000/WD-css3-userint-20000216\">early drafts of a predecessor of css3-ui</a> but was rejected by the working group."},"-moz-window-shadow":{"URL":"/en-US/docs/Web/CSS/-moz-window-shadow","SUMMARY":"<code>-moz-window-shadow</code> specifies whether a window will have a shadow. Currently it only works on Mac OS X."},"-moz-zoom-in":{"URL":"/en-US/docs/Web/CSS/-moz-zoom-in","SUMMARY":"<span class=\"breadcrumbs cssRef_breadcrumbs\">« <a href=\"/en-US/docs/CSS\">CSS</a> \n« <a href=\"/en-US/docs/CSS/css_reference\">CSS Reference</a> « <a href=\"/en-US/docs/CSS/css_reference/Mozilla_Extensions\">Mozilla Extensions</a></span> <div class=\"overheadIndicator deprecated deprecatedHeader\"> \n <p><strong>Deprecated since Gecko 24 (Firefox 24 / Thunderbird 24 / SeaMonkey 2.21)</strong><br/>This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.</p> \n </div>"},"-moz-zoom-out":{"URL":"/en-US/docs/Web/CSS/-moz-zoom-out","SUMMARY":"<span class=\"breadcrumbs cssRef_breadcrumbs\">« <a href=\"/en-US/docs/CSS\">CSS</a> \n« <a href=\"/en-US/docs/CSS/css_reference\">CSS Reference</a> « <a href=\"/en-US/docs/CSS/css_reference/Mozilla_Extensions\">Mozilla Extensions</a></span> <div class=\"overheadIndicator deprecated deprecatedHeader\"> \n <p><strong>Deprecated since Gecko 24 (Firefox 24 / Thunderbird 24 / SeaMonkey 2.21)</strong><br/>This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.</p> \n </div>"},"-webkit-border-before":{"URL":"/en-US/docs/Web/CSS/-webkit-border-before","SUMMARY":""},"-webkit-box-reflect":{"URL":"/en-US/docs/Web/CSS/-webkit-box-reflect","SUMMARY":"The <code>-webkit-box-reflect</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property lets you reflect the content of an element in one specific direction."},"-webkit-mask":{"URL":"/en-US/docs/Web/CSS/-webkit-mask","SUMMARY":"The <code>-webkit-mask</code> property is a shorthand property for setting individual mask property values in a single place in the style sheet. <code>-webkit-mask</code> can be used to set the values for one or more of: <a href=\"/en-US/docs/Web/CSS/-webkit-mask-image\" title=\"\"><code>-webkit-mask-image</code></a>, <a href=\"/en-US/docs/Web/CSS/-webkit-mask-repeat\" title=\"\"><code>-webkit-mask-repeat</code></a>, <a href=\"/en-US/docs/Web/CSS/-webkit-mask-attachment\" title=\"\"><code>-webkit-mask-attachment</code></a>, <a href=\"/en-US/docs/Web/CSS/-webkit-mask-position\" title=\"\"><code>-webkit-mask-position</code></a>, <a href=\"/en-US/docs/Web/CSS/-webkit-mask-origin\" title=\"\"><code>-webkit-mask-origin</code></a>, and <a href=\"/en-US/docs/Web/CSS/-webkit-mask-clip\" title=\"\"><code>-webkit-mask-clip</code></a>."},"-webkit-mask-attachment":{"URL":"/en-US/docs/Web/CSS/-webkit-mask-attachment","SUMMARY":"If a <a href=\"/en-US/docs/Web/CSS/-webkit-mask-image\" title=\"\"><code>-webkit-mask-image</code></a> is specified, <code>-webkit-mask-attachment</code> determines whether the mask image's position is fixed within the viewport, or scrolls along with its containing block."},"-webkit-mask-box-image":{"URL":"/en-US/docs/Web/CSS/-webkit-mask-box-image","SUMMARY":"<code>-webkit-mask-box-image</code> sets the mask image for an element's border box."},"-webkit-mask-clip":{"URL":"/en-US/docs/Web/CSS/-webkit-mask-clip","SUMMARY":"If a <a href=\"/en-US/docs/Web/CSS/-webkit-mask-image\" title=\"\"><code>-webkit-mask-image</code></a> is specified, <code>-webkit-mask-clip</code> determines the mask image's clipping behavior."},"-webkit-mask-composite":{"URL":"/en-US/docs/Web/CSS/-webkit-mask-composite","SUMMARY":"The <code>-webkit-mask-composite</code> 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 <a href=\"/en-US/docs/Web/CSS/-webkit-mask-image\" title=\"\"><code>-webkit-mask-image</code></a> property."},"-webkit-mask-image":{"URL":"/en-US/docs/Web/CSS/-webkit-mask-image","SUMMARY":"The<code style=\"font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;\"><span class=\"Apple-converted-space\"> </span>-webkit-mask-image<span class=\"Apple-converted-space\"> </span></code>CSS property sets the mask image for an element. A mask image clips the visible portion of an element according to the mask image's transparency."},"-webkit-mask-origin":{"URL":"/en-US/docs/Web/CSS/-webkit-mask-origin","SUMMARY":"The<code> -webkit-mask-origin </code>CSS property determines the origin of a mask image. The value of the <a href=\"/en-US/docs/Web/CSS/-webkit-mask-position\" title=\"\"><code>-webkit-mask-position</code></a> property is interpreted relative to the value of this property. This property does not apply when <span style=\"font-family: Courier New;\">-webkit-mask-attachment</span> is<code> <code>fixed</code></code>."},"-webkit-mask-position":{"URL":"/en-US/docs/Web/CSS/-webkit-mask-position","SUMMARY":"The<code> -webkit-mask-position</code> property sets the initial position of a mask image."},"-webkit-mask-repeat":{"URL":"/en-US/docs/Web/CSS/-webkit-mask-repeat","SUMMARY":"The <code>-webkit-mask-repeat</code> property specifies whether a mask image is repeated (tiled), and how."},"-webkit-overflow-scrolling":{"URL":"/en-US/docs/Web/CSS/-webkit-overflow-scrolling","SUMMARY":"Technical review completed."},"-webkit-print-color-adjust":{"URL":"/en-US/docs/Web/CSS/-webkit-print-color-adjust","SUMMARY":"The <code>-webkit-print-color-adjust</code> property is a non-standard CSS extension that can be used to force printing of background colors and images in browsers based on the WebKit engine."},"-webkit-shape-inside":{"URL":"/en-US/docs/Web/CSS/-webkit-shape-inside","SUMMARY":""},"-webkit-touch-callout":{"URL":"/en-US/docs/Web/CSS/-webkit-touch-callout","SUMMARY":"The <code>-webkit-touch-callout</code> <a href=\"/en-US/docs/Web/CSS\">CSS</a> property disables the default callout shown when you touch and hold a touch target.<br/><br/>\n When a target is touched and held on iPhone OS, Safari displays a callout information about the link. This property allows disabling that behavior."},":-moz-broken":{"URL":"/en-US/docs/Web/CSS/:-moz-broken","SUMMARY":"<code>:-moz-broken</code> matches elements representing broken image links."},":-moz-drag-over":{"URL":"/en-US/docs/Web/CSS/:-moz-drag-over","SUMMARY":"The <code>:-moz-drag-over</code> <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> is used to edit an element when a drag-over event is called on it."},":-moz-first-node":{"URL":"/en-US/docs/Web/CSS/:-moz-first-node","SUMMARY":"The <code>:-moz-first-node</code> <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> represents any element that is the first child node of some other element. It differs from <a href=\"/en-US/docs/Web/CSS/:first-child\" title=\"\"><code>:first-child</code></a> because it does not match a first child element with (non-whitespace) text before it."},":-moz-focusring":{"URL":"/en-US/docs/Web/CSS/:-moz-focusring","SUMMARY":"The <code>:-moz-focusring</code> CSS pseudo-class is similar to the <code>:focus</code> pseudo-class, but it only matches an element if the element is currently focused <strong>AND</strong> the user-agent has focus ring drawing enabled. If <code>:-moz-focusring</code> matches then <code>:focus</code> also matches, but the converse is not always true - it depends on whether the user-agent has focus ring drawing enabled. Whether the user-agent has focus ring drawing enabled can depend on things like the settings of the operating system the user is using, so the precise behavior of this pseudo-class can vary from platform to platform depending on each platforms' particular focus best practices (defaults) or user modified settings."},":-moz-full-screen-ancestor":{"URL":"/en-US/docs/Web/CSS/:-moz-full-screen-ancestor","SUMMARY":"The<code> :-moz-full-screen-ancestor </code>CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"en/CSS/Pseudo-classes\">pseudo-class</a> applies to all ancestors of the full-screen element, except containing frames in parent documents, which are the full-screen element in their own documents. However, those elements' ancestors have this class applied to them."},":-moz-handler-blocked":{"URL":"/en-US/docs/Web/CSS/:-moz-handler-blocked","SUMMARY":"<code>:-moz-handler-blocked</code> matches elements that cannot be displayed because their handlers have been blocked."},":-moz-handler-crashed":{"URL":"/en-US/docs/Web/CSS/:-moz-handler-crashed","SUMMARY":"<code>:-moz-handler-crashed</code> matches elements that cannot be displayed because the plugin responsible for drawing them has crashed."},":-moz-handler-disabled":{"URL":"/en-US/docs/Web/CSS/:-moz-handler-disabled","SUMMARY":"<code>:-moz-handler-disabled</code> matches elements that cannot be displayed because their handlers have been disabled by the user."},":-moz-last-node":{"URL":"/en-US/docs/Web/CSS/:-moz-last-node","SUMMARY":"The <code>:-moz-last-node</code> <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> matches an element that is the last child node of some other element. It differs from <a href=\"/en-US/docs/Web/CSS/:last-child\" title=\"\"><code>:last-child</code></a> because it does not match a last child element with (non-whitespace) text after it."},":-moz-list-number":{"URL":"/en-US/docs/Web/CSS/:-moz-list-number","SUMMARY":"The <code>::-moz-list-number</code> pseudo-class lets you customize the appearance of numbers on list items (<a href=\"/en-US/docs/Web/HTML/Element/li\" title=\"The HTML List item element (<li>) is used to represent a list item. It should be contained in an ordered list (<ol>), an unordered list (<ul>) or a menu (<menu>), where it represents a single entity in that list. In menus and unordered lists, list items are ordinarily displayed using bullet points. In ordered lists, they are usually displayed with some ascending counter on the left such as a number or letter\"><code><li></code></a>) occurring in ordered lists (<a href=\"/en-US/docs/Web/HTML/Element/ol\" title=\"The HTML <ol> Element (or HTML Ordered List Element) represents an ordered list of items. Typically, ordered-list items are displayed with a preceding numbering, which can be of any form, like numerals, letters or Romans numerals or even simple bullets. This numbered style is not defined in the HTML description of the page, but in its associated CSS, using the list-style-type property.\"><code><ol></code></a>)."},":-moz-loading":{"URL":"/en-US/docs/Web/CSS/:-moz-loading","SUMMARY":"<code>:-moz-loading</code> matches elements none of which can be displayed because they have not started loading, such as images that haven't started to arrive yet. Note that images that are <em>in the process</em> of loading <em>are not</em> matched by this pseudo-class."},":-moz-locale-dir(ltr)":{"URL":"/en-US/docs/Web/CSS/:-moz-locale-dir(ltr)","SUMMARY":"<code>:-moz-locale-dir(ltr)</code> matches an element if the user interface is being displayed left-to-right. This is determined by the preference <code>intl.uidirection.</code><em><code>locale</code></em> (where <em><code>locale</code></em> is the current locale) being set to \"ltr\"."},":-moz-locale-dir(rtl)":{"URL":"/en-US/docs/Web/CSS/:-moz-locale-dir(rtl)","SUMMARY":"<code>:-moz-locale-dir(rtl)</code> matches an element if the user interface is being displayed right-to-left. This is determined by the preference <code>intl.uidirection.</code><em><code>locale</code></em> (where <em><code>locale</code></em> is the current locale) being set to \"rtl\"."},":-moz-lwtheme":{"URL":"/en-US/docs/Web/CSS/:-moz-lwtheme","SUMMARY":"The <code>:-moz-lwtheme</code> <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> matches in chrome documents when the root element's <code id=\"a-lightweightthemes\"><a href=\"https://developer.mozilla.org/en-US/docs/XUL/Attribute/lightweightthemes\">lightweightthemes</a></code> attribute is <code>true</code> and a theme is selected."},":-moz-lwtheme-brighttext":{"URL":"/en-US/docs/Web/CSS/:-moz-lwtheme-brighttext","SUMMARY":"The <code>:-moz-lwtheme-brighttext</code> <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> matches in chrome documents when <a href=\"/en-US/docs/Web/CSS/:-moz-lwtheme\" title=\"\"><code>:-moz-lwtheme</code></a> is true and a lightweight theme with a bright text color is selected."},":-moz-lwtheme-darktext":{"URL":"/en-US/docs/Web/CSS/:-moz-lwtheme-darktext","SUMMARY":"The <code>:-moz-lwtheme-darktext</code> <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> matches in chrome documents when <a href=\"/en-US/docs/Web/CSS/:-moz-lwtheme\" title=\"\"><code>:-moz-lwtheme</code></a> is true and a lightweight theme with a dark text color is selected."},":-moz-only-whitespace":{"URL":"/en-US/docs/Web/CSS/:-moz-only-whitespace","SUMMARY":"The <code>:-moz-only-whitespace</code> pseudo-class matches an element that has no child nodes at all or empty text nodes or text nodes that have only white-space in them. Only when there are element nodes or text nodes with one or more characters inside the element, the element doesn't match this pseudo-class anymore."},":-moz-placeholder":{"URL":"/en-US/docs/Web/CSS/:-moz-placeholder","SUMMARY":"The <code>:-moz-placeholder</code> <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> represents any form element displaying <a href=\"/en/HTML/Forms_in_HTML#The_placeholder_attribute\" title=\"en/HTML/HTML5/Forms in HTML5#The placeholder attribute\">placeholder text</a>. This allows web developers and theme designers to customize the appearance of placeholder text, which is a light grey color by default. This may not work well if you've changed the background color of your form fields to be a similar color, for example, so you can use this pseudo-class to change the placeholder text color."},":-moz-submit-invalid":{"URL":"/en-US/docs/Web/CSS/:-moz-submit-invalid","SUMMARY":"The <code>:-moz-submit-invalid</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> represents any submit button on forms whose contents aren't valid based on their <a href=\"/en/HTML/Forms_in_HTML#Constraint_Validation\" title=\"en/HTML/HTML5/Forms in HTML5#Constraint Validation\">validation constraints</a>."},":-moz-suppressed":{"URL":"/en-US/docs/Web/CSS/:-moz-suppressed","SUMMARY":"<code>:-moz-suppressed</code> matches elements representing images that were not loaded because loading images from that site has been blocked."},":-moz-system-metric(images-in-menus)":{"URL":"/en-US/docs/Web/CSS/:-moz-system-metric(images-in-menus)","SUMMARY":"<code>:-moz-system-metric(images-in-menus)</code> will match an element if the computer's user interface supports images in menus."},":-moz-system-metric(mac-graphite-theme)":{"URL":"/en-US/docs/Web/CSS/:-moz-system-metric(mac-graphite-theme)","SUMMARY":"<code>:-moz-system-metric(mac-graphite-theme)</code> will match an element if the user has chosen the \"Graphite\" appearance in the \"Appearance\" prefpane of the Mac OS X System Preferences."},":-moz-system-metric(scrollbar-end-backward)":{"URL":"/en-US/docs/Web/CSS/:-moz-system-metric(scrollbar-end-backward)","SUMMARY":"<code>:-moz-system-metric(scrollbar-end-backward)</code> will match an element if the computer's user interface includes a backward arrow button at the end of scrollbars."},":-moz-system-metric(scrollbar-end-forward)":{"URL":"/en-US/docs/Web/CSS/:-moz-system-metric(scrollbar-end-forward)","SUMMARY":"<code>:-moz-system-metric(scrollbar-end-forward)</code> will match an element if the computer's user interface includes a forward arrow button at the end of scrollbars."},":-moz-system-metric(scrollbar-start-backward)":{"URL":"/en-US/docs/Web/CSS/:-moz-system-metric(scrollbar-start-backward)","SUMMARY":"<code>:-moz-system-metric(scrollbar-start-backward)</code> will match an element if the computer's user interface includes a backward arrow button at the start of scrollbars."},":-moz-system-metric(scrollbar-start-forward)":{"URL":"/en-US/docs/Web/CSS/:-moz-system-metric(scrollbar-start-forward)","SUMMARY":"<code>:-moz-system-metric(scrollbar-start-forward)</code> will match an element if the computer's user interface includes a forward arrow button at the start of scrollbars."},":-moz-system-metric(scrollbar-thumb-proportional)":{"URL":"/en-US/docs/Web/CSS/:-moz-system-metric(scrollbar-thumb-proportional)","SUMMARY":"<code>:-moz-system-metric(scrollbar-thumb-proportional)</code> will match an element if the computer's user interface uses proportional scrollbar thumbs; that is, the draggable thumb on the scrollbar resizes to indicate the relative size of the visible area of the document."},":-moz-system-metric(touch-enabled)":{"URL":"/en-US/docs/Web/CSS/:-moz-system-metric(touch-enabled)","SUMMARY":"<code>:-moz-system-metric(touch-enabled)</code> will match an element if the device on which the content is being rendered offers a supported touch-screen interface."},":-moz-system-metric(windows-default-theme)":{"URL":"/en-US/docs/Web/CSS/:-moz-system-metric(windows-default-theme)","SUMMARY":"<code>:-moz-system-metric(windows-default-theme)</code> will match an element if the user is currently using one of the following themes in Windows: Luna, Royale, Zune, or Aero (i.e., Vista Basic, Vista Standard, or Aero Glass). This will exclude Windows Classic themes as well as third-party themes."},":-moz-tree-cell":{"URL":"/en-US/docs/Web/CSS/:-moz-tree-cell","SUMMARY":"Activated by the 'properties' attribute."},":-moz-tree-cell-text":{"URL":"/en-US/docs/Web/CSS/:-moz-tree-cell-text","SUMMARY":"Activated by the 'properties' attribute."},":-moz-tree-cell-text(hover)":{"URL":"/en-US/docs/Web/CSS/:-moz-tree-cell-text(hover)","SUMMARY":"<code>:-moz-tree-cell-text(hover)</code> will match an element if the mouse cursor is presently hovering over text in a tree cell."},":-moz-tree-column":{"URL":"/en-US/docs/Web/CSS/:-moz-tree-column","SUMMARY":"Activated by the 'properties' attribute."},":-moz-tree-drop-feedback":{"URL":"/en-US/docs/Web/CSS/:-moz-tree-drop-feedback","SUMMARY":"Activated by the 'properties' attribute."},":-moz-tree-image":{"URL":"/en-US/docs/Web/CSS/:-moz-tree-image","SUMMARY":"Activated by the 'properties' attribute."},":-moz-tree-indentation":{"URL":"/en-US/docs/Web/CSS/:-moz-tree-indentation","SUMMARY":"Activated by the 'properties' attribute."},":-moz-tree-line":{"URL":"/en-US/docs/Web/CSS/:-moz-tree-line","SUMMARY":"Activated by the 'properties' attribute."},":-moz-tree-progressmeter":{"URL":"/en-US/docs/Web/CSS/:-moz-tree-progressmeter","SUMMARY":"Activated by the when the 'type' attribute is set to 'progressmeter'."},":-moz-tree-row":{"URL":"/en-US/docs/Web/CSS/:-moz-tree-row","SUMMARY":"<code>-moz-tree-row</code> is used to select rows and apply style to tree rows."},":-moz-tree-row(hover)":{"URL":"/en-US/docs/Web/CSS/:-moz-tree-row(hover)","SUMMARY":"<code>:-moz-tree-row(hover)</code> will match an element if the mouse cursor is presently hovering over a tree row."},":-moz-tree-separator":{"URL":"/en-US/docs/Web/CSS/:-moz-tree-separator","SUMMARY":"Activated by the 'properties' attribute."},":-moz-tree-twisty":{"URL":"/en-US/docs/Web/CSS/:-moz-tree-twisty","SUMMARY":"Activated by the 'properties' attribute."},":-moz-ui-invalid":{"URL":"/en-US/docs/Web/CSS/:-moz-ui-invalid","SUMMARY":"The <code>:-moz-ui-invalid</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> represents any <a href=\"/en/HTML/Forms_in_HTML#Constraint_Validation\" title=\"https://developer.mozilla.org/en/HTML/HTML5/Forms_in_HTML5#Constraint_Validation\">validated form element</a> whose value isn't valid based on their <a href=\"/en/HTML/Forms_in_HTML#Constraint_Validation\" title=\"en/HTML/HTML5/Forms in HTML5#Constraint Validation\">validation constraints</a>, in certain circumstances. This pseudo-class is applied according to the following rules:"},":-moz-ui-valid":{"URL":"/en-US/docs/Web/CSS/:-moz-ui-valid","SUMMARY":"The <code>:-moz-ui-valid</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> represents any <a href=\"/en/HTML/Forms_in_HTML#Constraint_Validation\" title=\"https://developer.mozilla.org/en/HTML/HTML5/Forms_in_HTML5#Constraint_Validation\">validated form element</a> whose value validates correctly based on its <a href=\"/en/HTML/Forms_in_HTML#Constraint_Validation\" title=\"en/HTML/HTML5/Forms in HTML5#Constraint Validation\">validation constraints</a>."},":-moz-user-disabled":{"URL":"/en-US/docs/Web/CSS/:-moz-user-disabled","SUMMARY":"<code>:-moz-user-disabled</code> matches elements representing images that were not loaded because images have been entirely disabled by the user's preferences."},":-moz-window-inactive":{"URL":"/en-US/docs/Web/CSS/:-moz-window-inactive","SUMMARY":"The <code>:-moz-window-inactive</code> pseudo-class matches any element while it's in an inactive window."},":-webkit-autofill":{"URL":"/en-US/docs/Web/CSS/:-webkit-autofill","SUMMARY":"The <code>:-webkit-autofill</code> CSS <a href=\"/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> matches when an <a href=\"/en-US/docs/Web/HTML/Element/input\" title=\"The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user. The semantics of an <input> varies considerably depending on the value of its type attribute.\"><code><input></code></a> element has its value autofilled by the browser. The user-agent stylesheets of many browsers use <code>!important</code> in their <code>:-webkit-autofill</code> style declarations, making them non-overrideable by webpages without resorting to JavaScript hacks."},"::-moz-list-bullet":{"URL":"/en-US/docs/Web/CSS/:-moz-list-bullet","SUMMARY":"The <code>::-moz-list-bullet</code> pseudo-class is used to edit the bullet of a list element."},"::-moz-page":{"URL":"/en-US/docs/Web/CSS/::-moz-page","SUMMARY":"The<code> ::-moz-page </code>CSS <a href=\"/en/CSS/Pseudo-elements\" title=\"en/CSS/Pseudo-elements\">pseudo-element</a> applies to an individual page in print/print preview."},"::-moz-page-sequence":{"URL":"/en-US/docs/Web/CSS/::-moz-page-sequence","SUMMARY":"The<code> ::-moz-page-sequence </code>CSS <a href=\"/en/CSS/Pseudo-elements\" title=\"en/CSS/Pseudo-elements\">pseudo-element</a> represents the background of the print preview."},"::-moz-placeholder":{"URL":"/en-US/docs/Web/CSS/::-moz-placeholder","SUMMARY":"The <code>::-moz-placeholder</code> <a href=\"/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a> represents any form element displaying <a href=\"/en-US/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute\">placeholder text</a>. This allows web developers and theme designers to customize the appearance of placeholder text, which is a light grey color by default. This may not work well if you've changed the background color of your form fields to be a similar color, for example, so you can use this pseudo-element to change the placeholder text color."},"::-moz-progress-bar":{"URL":"/en-US/docs/Web/CSS/::-moz-progress-bar","SUMMARY":"The<code> ::-moz-progress-bar</code> pseudo-element applies to the area of an HTML <a href=\"/en-US/docs/Web/HTML/Element/progress\" title=\"The HTML <progress> Element is used to view the completion progress of a task. While the specifics of how it's displayed is left up to the browser developer, it's typically displayed as a progress bar. Javascript can be used to manipulate the value of progress bar.\"><code><progress></code></a> element that represents the amount of progress that has happened so far. This lets you, for example, change the color of progress bars."},"::-moz-scrolled-page-sequence":{"URL":"/en-US/docs/Web/CSS/::-moz-scrolled-page-sequence","SUMMARY":"The <code>::-moz-scrolled-page-sequence</code> CSS <a href=\"/en/CSS/Pseudo-elements\" title=\"en/CSS/Pseudo-elements\">pseudo-element</a> represents the background of the print preview."},"::-ms-check":{"URL":"/en-US/docs/Web/CSS/::-ms-check","SUMMARY":"The <strong><code>::-ms-check</code></strong> CSS <a href=\"/en/CSS/Pseudo-elements\" title=\"en/CSS/Pseudo-elements\">pseudo-element</a> represents the checkmark of an <a href=\"/en-US/docs/Web/HTML/Element/input\" title=\"The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user. The semantics of an <input> varies considerably depending on the value of its type attribute.\"><code><input></code></a> of <code>type=\"checkbox\"</code> or <code>type=\"radio\"</code>."},"::-ms-clear":{"URL":"/en-US/docs/Web/CSS/::-ms-clear","SUMMARY":"The <strong><code>::-ms-clear</code></strong> CSS <a href=\"/en/CSS/Pseudo-elements\" title=\"en/CSS/Pseudo-elements\">pseudo-element</a> represents a button (the \"clear button\") at the edge of a text <a href=\"/en-US/docs/Web/HTML/Element/input\" title=\"The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user. The semantics of an <input> varies considerably depending on the value of its type attribute.\"><code><input></code></a> which clears away the <a href=\"/en-US/docs/Web/HTML/Element/input\" title=\"The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user. The semantics of an <input> varies considerably depending on the value of its type attribute.\"><code><input></code></a>'s current value. This button and this pseudo-element are nonstandard and specific to Internet Explorer 10+, hence the vendor prefix. The clear button is only shown on focused, non-empty text <a href=\"/en-US/docs/Web/HTML/Element/input\" title=\"The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user. The semantics of an <input> varies considerably depending on the value of its type attribute.\"><code><input></code></a>s."},"::-ms-expand":{"URL":"/en-US/docs/Web/CSS/::-ms-expand","SUMMARY":"The <strong><code>::-ms-expand</code></strong> CSS <a href=\"/en/CSS/Pseudo-elements\" title=\"en/CSS/Pseudo-elements\">pseudo-element</a> represents the button within a <a href=\"/en-US/docs/Web/HTML/Element/select\" title=\"The HTML select (<select>) element represents a control that presents a menu of options. The options within the menu are represented by <option> elements, which can be grouped by <optgroup> elements. Options can be pre-selected for the user.\"><code><select></code></a> that opens or closes the drop-down menu that displays the <a href=\"/en-US/docs/Web/HTML/Element/option\" title=\"In a Web form, the HTML <option> element is used to create a control representing an item within a <select>, an <optgroup> or a <datalist> HTML5 element.\"><code><option></code></a>s. It often normally looks like a triangle that points downward."},"::-ms-reveal":{"URL":"/en-US/docs/Web/CSS/::-ms-reveal","SUMMARY":"The <strong><code>::-ms-reveal</code></strong> CSS <a href=\"/en/CSS/Pseudo-elements\" title=\"en/CSS/Pseudo-elements\">pseudo-element</a> represents a button (the \"password reveal button\") at the edge of an <a href=\"/en-US/docs/Web/HTML/Element/input\" title=\"The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user. The semantics of an <input> varies considerably depending on the value of its type attribute.\"><code><input></code></a> of <code>type=\"password\"</code> that activates the plaintext display of the password field's value (instead of the usual obscured-for-privacy all-asterisks display). This button and this pseudo-element are nonstandard and specific to Internet Explorer 10+, hence the vendor prefix."},"::-ms-thumb":{"URL":"/en-US/docs/Web/CSS/::-ms-thumb","SUMMARY":"The <strong><code>::-ms-thumb</code></strong> CSS <a href=\"/en/CSS/Pseudo-elements\" title=\"en/CSS/Pseudo-elements\">pseudo-element</a> represents the \"thumb\" that the user can move within the \"groove\" of an <a href=\"/en-US/docs/Web/HTML/Element/input\" title=\"The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user. The semantics of an <input> varies considerably depending on the value of its type attribute.\"><code><input></code></a> of <code>type=\"range\"</code> to alter its numerical value."},"::-ms-track":{"URL":"/en-US/docs/Web/CSS/::-ms-track","SUMMARY":"The <strong><code>::-ms-track</code></strong> CSS <a href=\"/en/CSS/Pseudo-elements\" title=\"en/CSS/Pseudo-elements\">pseudo-element</a> represents the \"track\" (the groove in which the indicator slides) of an <a href=\"/en-US/docs/Web/HTML/Element/input\" title=\"The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user. The semantics of an <input> varies considerably depending on the value of its type attribute.\"><code><input></code></a> of <code>type=\"range\"</code>."},"::-ms-value":{"URL":"/en-US/docs/Web/CSS/::-ms-value","SUMMARY":"The <strong><code>::-ms-value</code></strong> <a href=\"/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a> applies rules to the value/content of an <a href=\"/en-US/docs/Web/HTML/Element/input\" title=\"The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user. The semantics of an <input> varies considerably depending on the value of its type attribute.\"><code><input></code></a> or a <a href=\"/en-US/docs/Web/HTML/Element/select\" title=\"The HTML select (<select>) element represents a control that presents a menu of options. The options within the menu are represented by <option> elements, which can be grouped by <optgroup> elements. Options can be pre-selected for the user.\"><code><select></code></a>. Only certain properties can be set on this pseudo-element; others will have no effect."},"::after (:after)":{"URL":"/en-US/docs/Web/CSS/::after","SUMMARY":"The CSS <code>::after</code> <a href=\"/en/CSS/Pseudo-elements\" title=\"Pseudo-elements\">pseudo-element</a> matches a virtual last child of the selected element. It is typically used to add cosmetic content to an element by using the <a href=\"/en-US/docs/Web/CSS/content\" title=\"The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element. Objects inserted using the content property are anonymous replaced elements.\"><code>content</code></a> CSS property. This element is inline by default."},"::before (:before)":{"URL":"/en-US/docs/Web/CSS/::before","SUMMARY":"<code>::before</code> creates a <a href=\"/en/CSS/Pseudo-elements\" title=\"Pseudo-elements\">pseudo-element</a> that is the first child of the element matched. It is often used to add cosmetic content to an element by using the <a href=\"/en-US/docs/Web/CSS/content\" title=\"The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element. Objects inserted using the content property are anonymous replaced elements.\"><code>content</code></a> property. This element is inline by default."},"::first-letter (:first-letter)":{"URL":"/en-US/docs/Web/CSS/::first-letter","SUMMARY":"The <code>::first-letter</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> <a href=\"/en/CSS/Pseudo-elements\" title=\"Pseudo-elements\">pseudo-element</a> selects the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line."},"::first-line (:first-line)":{"URL":"/en-US/docs/Web/CSS/::first-line","SUMMARY":"The <code>::first-line</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> <a href=\"/en-US/docs/Web/CSS/Pseudo-elements\" title=\"Pseudo-elements\">pseudo-element</a> applies styles only to the first line of an element. The amount of the text on the first line depends of numerous factors, like the width of the elements or of the document, but also of the font size of the text. As all pseudo-elements, the selectors containing <code>::first-line</code> does not match any real HTML element."},"::selection":{"URL":"/en-US/docs/Web/CSS/::selection","SUMMARY":"The <code>::selection</code> CSS pseudo-element applies rules to the portion of a document that has been highlighted (e.g. selected with the mouse or another pointing device) by the user."},":active":{"URL":"/en-US/docs/Web/CSS/:active","SUMMARY":"The <code>:active</code> CSS <a href=\"/en-US/docs/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. When interacting with a mouse, this is typically the time between the user presses the mouse button and releases it. The <code>:active</code> pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on <a href=\"/en-US/docs/Web/HTML/Element/a\" title=\"The HTML <a> Element (or the HTML Anchor Element) defines a hyperlink, the named target destination for a hyperlink, or both.\"><code><a></code></a> and <a href=\"/en-US/docs/Web/HTML/Element/button\" title=\"The HTML <button> Element represents a clickable button.\"><code><button></code></a> HTML elements, but may not be limited to just those."},":any":{"URL":"/en-US/docs/Web/CSS/:any","SUMMARY":"The <code>:any()</code> <a href=\"/en-US/docs/CSS/Pseudo-classes\" title=\"CSS/Pseudo-classes\">pseudo-class</a> lets you quickly construct sets of similar selectors by establishing groups from which any of the included items will match. This is an alternative to having to repeat the entire selector for the one item that varies."},":checked":{"URL":"/en-US/docs/Web/CSS/:checked","SUMMARY":"The <code>:checked</code> CSS <a href=\"/en-US/docs/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> selector represents any <strong>radio </strong>(<code><input type=\"radio\"></code>), <strong>checkbox </strong>(<code><input type=\"checkbox\"></code>) or <strong>option</strong> (<a href=\"/en-US/docs/Web/HTML/Element/option\" title=\"In a Web form, the HTML <option> element is used to create a control representing an item within a <select>, an <optgroup> or a <datalist> HTML5 element.\"><code><option></code></a> in a <a href=\"/en-US/docs/Web/HTML/Element/select\" title=\"The HTML select (<select>) element represents a control that presents a menu of options. The options within the menu are represented by <option> elements, which can be grouped by <optgroup> elements. Options can be pre-selected for the user.\"><code><select></code></a>) element that is checked or toggled to an <code>on</code> state. The user can change this state by clicking on the element, or selecting a different value, in which case the <code>:checked</code> pseudo-class no longer applies to this element, but will to the relevant one."},":default":{"URL":"/en-US/docs/Web/CSS/:default","SUMMARY":"The <code>:default</code> <a href=\"/en-US/docs/CSS\" title=\"/en-US/docs/CSS\">CSS</a> <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> represents any user interface element that is the default among a group of similar elements."},":dir()":{"URL":"/en-US/docs/Web/CSS/:dir","SUMMARY":"The <code>:dir</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> matches elements based on the directionality of the text contained in it. In HTML, the direction is determined by the <code><a href=\"/en-US/docs/Web/HTML/Element/html#attr-dir\">dir</a></code> attribute. For other document types there may be other document methods for determining the language."},":disabled":{"URL":"/en-US/docs/Web/CSS/:disabled","SUMMARY":"The <code>:disabled</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> represents any disabled element. An element is disabled if it can't be activated (e.g. selected, clicked on or accept text input) or accept focus. The element also has an enabled state, in which it can be activated or accept focus."},":empty":{"URL":"/en-US/docs/Web/CSS/:empty","SUMMARY":"The <code>:empty</code> <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> represents any element that has no children at all. Only element nodes and text (including whitespace) are considered. Comments or processing instructions do not affect whether an element is considered empty or not."},":enabled":{"URL":"/en-US/docs/Web/CSS/:enabled","SUMMARY":"The <code>:enabled</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> represents any enabled element. An element is enabled if it can be activated (e.g. selected, clicked on or accept text input) or accept focus. The element also has an disabled state, in which it can't be activated or accept focus."},":first":{"URL":"/en-US/docs/Web/CSS/:first","SUMMARY":"The <code>:first</code> <a href=\"/en/CSS/@page\" title=\"@page\">page</a> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> describes the styling of the first page when printing a document."},":first-child":{"URL":"/en-US/docs/Web/CSS/:first-child","SUMMARY":"The <code>:first-child</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class </a>represents any element that is the first child element of its parent."},":first-of-type":{"URL":"/en-US/docs/Web/CSS/:first-of-type","SUMMARY":"The <code>:first-of-type</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> represents the first sibling of its type in the list of children of its parent element."},":focus":{"URL":"/en-US/docs/Web/CSS/:focus","SUMMARY":"The <code>:focus</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> is applied when a element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse (e.g. a form input)."},":fullscreen":{"URL":"/en-US/docs/Web/CSS/:fullscreen","SUMMARY":"The<code> :fullscreen </code>CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"en/CSS/Pseudo-classes\">pseudo-class</a> applies to any element that's currently being displayed in full-screen mode. See <a href=\"/en/DOM/Using_full-screen_mode\" title=\"en/DOM/Using full-screen mode\">Using full-screen mode</a> for details."},":hover":{"URL":"/en-US/docs/Web/CSS/:hover","SUMMARY":"The <code>:hover</code> CSS <a href=\"/en-US/docs/Web/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> matches when the user designates an element with a pointing device, but does not necessarily activate it. This style may be overridden by any other link-related pseudo-classes, that is <a href=\"/en-US/docs/Web/CSS/:link\" title=\"The :link CSS pseudo-class lets you select links inside elements. This will select any link, even those already styled using selector with other link-related pseudo-classes like :hover, :active or :visited. In order to style only non-visited links, you need to put the :link rule before the other ones, as defined by the LVHA-order: :link — :visited — :hover — :active. The :focus pseudo-class is usually placed right before or right after :hover, depending of the expected effect.\"><code>:link</code></a>, <a href=\"/en-US/docs/Web/CSS/:visited\" title=\"The :visited CSS pseudo-class lets you select only links that have been visited. This style may be overridden by any other link-related pseudo-classes, that is :link, :hover, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :visited rule after the :link rule but before the other ones, defined in the LVHA-order: :link — :visited — :hover — :active.\"><code>:visited</code></a>, and <a href=\"/en-US/docs/Web/CSS/:active\" title=\"The :active CSS pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. When interacting with a mouse, this is typically the time between the user presses the mouse button and releases it. The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on <a> and <button> HTML elements, but may not be limited to just those.\"><code>:active</code></a>, appearing in subsequent rules. In order to style appropriately links, you need to put the <code>:hover</code> rule after the <code>:link</code> and <code>:visited</code> rules but before the <code>:active</code> one, as defined by the <em>LVHA-order</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>."},":indeterminate":{"URL":"/en-US/docs/Web/CSS/:indeterminate","SUMMARY":"The <code>:indeterminate</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"en/CSS/Pseudo-classes\">pseudo-class</a> represents any <code><input type=\"checkbox\"></code> element whose <code>indeterminate</code> DOM property is set to <code>true</code> by JavaScript. In addition, in some browsers, it can be used to match to <a href=\"/en-US/docs/Web/HTML/Element/progress\" title=\"The HTML <progress> Element is used to view the completion progress of a task. While the specifics of how it's displayed is left up to the browser developer, it's typically displayed as a progress bar. Javascript can be used to manipulate the value of progress bar.\"><code><progress></code></a> elements in an indeterminate state."},":invalid":{"URL":"/en-US/docs/Web/CSS/:invalid","SUMMARY":"The <code>:invalid</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> represents any <a href=\"/en-US/docs/Web/HTML/Element/input\" title=\"The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user. The semantics of an <input> varies considerably depending on the value of its type attribute.\"><code><input></code></a> or <a href=\"/en-US/docs/Web/HTML/Element/form\" title=\"The HTML <form> element represents a document section that contains interactive controls to submit information to a web server.\"><code><form></code></a> element whose content fails to <a href=\"/en/HTML/HTML5/Constraint_validation\" title=\"en/HTML/HTML5/Constraint_validation\">validate</a> according to the input's type setting. This allows you to easily have invalid fields adopt an appearance that helps the user identify and correct errors."},":lang":{"URL":"/en-US/docs/Web/CSS/:lang","SUMMARY":"The <code>:lang</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> matches elements based on the language the element is determined to be in. In HTML, the language is determined by a combination of the <code>lang</code> attribute, the <a href=\"/en-US/docs/Web/HTML/Element/meta\" title=\"The HTML Meta Element (<meta>) represents any metadata information that cannot be represented by one of the other HTML meta-related elements (<base>, <link>, <script>, <style> or <title>).\"><code><meta></code></a> element, and possibly by information from the protocol (such as HTTP headers). For other document types there may be other document methods for determining the language."},":last-child":{"URL":"/en-US/docs/Web/CSS/:last-child","SUMMARY":"The <code>:last-child</code> CSS <a href=\"/en-US/docs/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> represents any element that is the last child element of its parent."},":last-of-type":{"URL":"/en-US/docs/Web/CSS/:last-of-type","SUMMARY":"The <code>:last-of-type</code> <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">CSS pseudo-class</a> represents the last sibling with the given element name in the list of children of its parent element."},":left":{"URL":"/en-US/docs/Web/CSS/:left","SUMMARY":"The <code>:left</code> CSS <a href=\"/en/CSS/@page\" title=\"@page\">page</a> <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> matches any left page when printing a page. It allows to describe the styling of left-side pages."},":link":{"URL":"/en-US/docs/Web/CSS/:link","SUMMARY":"The <code>:link</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> lets you select links inside elements. This will select any link which has not yet been visited, even those already styled using selector with other link-related pseudo-classes like <a href=\"/en-US/docs/Web/CSS/:hover\" title=\"The :hover CSS pseudo-class matches when the user designates an element with a pointing device, but does not necessarily activate it. This style may be overridden by any other link-related pseudo-classes, that is :link, :visited, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :hover rule after the :link and :visited rules but before the :active one, as defined by the LVHA-order: :link — :visited — :hover — :active.\"><code>:hover</code></a>, <a href=\"/en-US/docs/Web/CSS/:active\" title=\"The :active CSS pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. When interacting with a mouse, this is typically the time between the user presses the mouse button and releases it. The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on <a> and <button> HTML elements, but may not be limited to just those.\"><code>:active</code></a> or <a href=\"/en-US/docs/Web/CSS/:visited\" title=\"The :visited CSS pseudo-class lets you select only links that have been visited. This style may be overridden by any other link-related pseudo-classes, that is :link, :hover, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :visited rule after the :link rule but before the other ones, defined in the LVHA-order: :link — :visited — :hover — :active.\"><code>:visited</code></a>. In order to appropriately style links, you need to put the <code>:link</code> rule before the other ones, as defined by the <em>LVHA-order</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>. The <a href=\"/en-US/docs/Web/CSS/:focus\" title=\"The :focus CSS pseudo-class is applied when a element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse (e.g. a form input).\"><code>:focus</code></a> pseudo-class is usually placed right before or right after <code>:hover</code>, depending on the expected effect."},":not()":{"URL":"/en-US/docs/Web/CSS/:not","SUMMARY":"The <strong>negation </strong><a href=\"/en-US/docs/CSS/Pseudo-classes\" title=\"Pseudo-classes\">CSS pseudo-class</a>, <code>:not(X)</code>, is a functional notation taking a simple selector <var>X</var> as an argument. It matches an element that is not represented by the argument. <var>X</var> must not contain another negation selector."},":nth-child":{"URL":"/en-US/docs/Web/CSS/:nth-child","SUMMARY":"The <code>:nth-child(an+b)</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> <a href=\"/en-US/docs/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> matches an element that has <code><em>a</em>n+<em>b</em>-1</code> siblings before it in the document tree, for a given positive or zero value for <code>n</code>, and has a parent element. More simply stated, the selector matches a number of child elements whose numeric position in the series of children matches the pattern <em>an+b</em>."},":nth-last-child":{"URL":"/en-US/docs/Web/CSS/:nth-last-child","SUMMARY":"The <code>:nth-last-child</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> matches an element that has <code><em>a</em>n+<em>b</em>-1</code> siblings after it in the document tree, for a given positive or zero value for <code>n</code>, and has a parent element."},":nth-last-of-type":{"URL":"/en-US/docs/Web/CSS/:nth-last-of-type","SUMMARY":"The <code>:nth-last-of-type</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> matches an element that has <code><em>a</em>n+<em>b</em>-1</code> siblings with the same element name after it in the document tree, for a given positive or zero value for <code>n</code>, and has a parent element. See <a href=\"/en-US/docs/Web/CSS/:nth-child\" title=\"The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element.\"><code>:nth-child</code></a> for a more thorough description of the syntax of its argument."},":nth-of-type":{"URL":"/en-US/docs/Web/CSS/:nth-of-type","SUMMARY":"The <code>:nth-of-type</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> matches an element that has <code><em>a</em>n+<em>b</em>-1</code> siblings with the same element name before it in the document tree, for a given positive or zero value for <code>n</code>, and has a parent element. See <a href=\"/en-US/docs/Web/CSS/:nth-child\" title=\"The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element. More simply stated, the selector matches a number of child elements whose numeric position in the series of children matches the pattern an+b.\"><code>:nth-child</code></a> for a more thorough description of the syntax of its argument. This is a more flexible and useful pseudo selector if you want to ensure you're selecting the same type of tag no matter where it is inside the parent element, or what other different tags appear before it."},":only-child":{"URL":"/en-US/docs/Web/CSS/:only-child","SUMMARY":"The <code>:only-child</code> CSS <a href=\"/en-US/docs/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> represents any element which is the only child of its parent. This is the same as <code>:first-child:last-child</code> or <code>:nth-child(1):nth-last-child(1)</code>, but with a lower specificity."},":only-of-type":{"URL":"/en-US/docs/Web/CSS/:only-of-type","SUMMARY":"The <code>:only-of-type</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> represents any element that has no siblings of the given type."},":optional":{"URL":"/en-US/docs/Web/CSS/:optional","SUMMARY":"The <code>:optional</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> represents any <a href=\"/en-US/docs/Web/HTML/Element/input\" title=\"The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user. The semantics of an <input> varies considerably depending on the value of its type attribute.\"><code><input></code></a> element that does not have the <code><a href=\"/en-US/docs/Web/HTML/Element/input#attr-required\">required</a></code> attribute set on it. This allows forms to easily indicate optional fields, and to style them accordingly."},":out-of-range":{"URL":"/en-US/docs/Web/CSS/:out-of-range","SUMMARY":"The <code>:out-of-range</code> CSS <a href=\"/en-US/docs/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> matches when an element has its value attribute outside the specified range limitations for this element. It allows the page to give a feedback that the value currently defined using the element is outside the range limits. A value can be outside of a range if it is either smaller or larger than maximum and minimum set values."},":read-write":{"URL":"/en-US/docs/Web/CSS/:read-write","SUMMARY":"The <code>:read-write</code> CSS <a href=\"/en-US/docs/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> matches when an element is editable by user like text input element."},":required":{"URL":"/en-US/docs/Web/CSS/:required","SUMMARY":"The <code>:required</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> represents any <a href=\"/en-US/docs/Web/HTML/Element/input\" title=\"The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user. The semantics of an <input> varies considerably depending on the value of its type attribute.\"><code><input></code></a> element that has the <code><a href=\"/en-US/docs/Web/HTML/Element/input#attr-required\">required</a></code> attribute set on it. This allows forms to easily indicate which fields must have valid data before the form can be submitted."},":right":{"URL":"/en-US/docs/Web/CSS/:right","SUMMARY":"The <code>:right</code> CSS <a href=\"/en/CSS/@page\" title=\"@page\">page</a> <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> matches any right page when printing a page. It allows to describe the styling of right-side page."},":root":{"URL":"/en-US/docs/Web/CSS/:root","SUMMARY":"The <code>:root</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\"> pseudo-class</a> matches the root element of a tree representing the document. Applied to HTML, <code>:root</code> represents the <a href=\"/en-US/docs/Web/HTML/Element/html\" title=\"The HTML root element (<html>) represents the root of an HTML document. All other elements must be descendants of this element.\"><code><html></code></a> element and is identical to the selector <code>html</code>, except that its <a href=\"/en/CSS/Specificity\" title=\"Specificity\">specificity</a> is higher."},":scope":{"URL":"/en-US/docs/Web/CSS/:scope","SUMMARY":"The <code>:scope</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\"> pseudo-class</a> matches the elements that are a reference point for selectors to match against. In HTML, a new reference point can be defined using the <code><a href=\"/en-US/docs/Web/HTML/Element/style#attr-scoped\"/></code> attribute of the <a href=\"/en-US/docs/Web/HTML/Element/style\" title=\"The HTML Style Element (<style>) contains style information for a document, or part of a document. By default, the style instructions writen inside that element are expected to be CSS.\"><code><style></code></a>. If no such attribute is used on an HTML page, the reference point is the <a href=\"/en-US/docs/Web/HTML/Element/html\" title=\"The HTML Root Element (<html>) represents the root of an HTML document. All other elements must be descendants of this element.\"><code><html></code></a> element."},":target":{"URL":"/en-US/docs/Web/CSS/:target","SUMMARY":"The<code> :target </code><a href=\"/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-class</a> represents the unique element, if any, with an <strong>id</strong> matching the fragment identifier of the URI of the document.."},":valid":{"URL":"/en-US/docs/Web/CSS/:valid","SUMMARY":"The <code>:valid</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> represents any <a href=\"/en-US/docs/Web/HTML/Element/input\" title=\"The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user. The semantics of an <input> varies considerably depending on the value of its type attribute.\"><code><input></code></a> or <a href=\"/en-US/docs/Web/HTML/Element/form\" title=\"The HTML <form> element represents a document section that contains interactive controls to submit information to a web server.\"><code><form></code></a> element whose content <a href=\"/en/HTML/HTML5/Constraint_validation\" title=\"en/HTML/HTML5/Constraint_validation\">validates</a> correctly according to the input's type setting. This allows to easily make valid fields adopt an appearance that helps the user confirm that their data is formatted properly."},":visited":{"URL":"/en-US/docs/Web/CSS/:visited","SUMMARY":"The <code>:visited</code> CSS <a href=\"/en/CSS/Pseudo-classes\" title=\"Pseudo-classes\">pseudo-class</a> lets you select only links that have been visited. This style may be overridden by any other link-related pseudo-classes, that is <a href=\"/en-US/docs/Web/CSS/:link\" title=\"The :link CSS pseudo-class lets you select links inside elements. This will select any link which has not yet been visited, even those already styled using selector with other link-related pseudo-classes like :hover, :active or :visited. In order to appropriately style links, you need to put the :link rule before the other ones, as defined by the LVHA-order: :link — :visited — :hover — :active. The :focus pseudo-class is usually placed right before or right after :hover, depending on the expected effect.\"><code>:link</code></a>, <a href=\"/en-US/docs/Web/CSS/:hover\" title=\"The :hover CSS pseudo-class matches when the user designates an element with a pointing device, but does not necessarily activate it. This style may be overridden by any other link-related pseudo-classes, that is :link, :visited, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :hover rule after the :link and :visited rules but before the :active one, as defined by the LVHA-order: :link — :visited — :hover — :active.\"><code>:hover</code></a>, and <a href=\"/en-US/docs/Web/CSS/:active\" title=\"The :active CSS pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. When interacting with a mouse, this is typically the time between the user presses the mouse button and releases it. The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on <a> and <button> HTML elements, but may not be limited to just those.\"><code>:active</code></a>, appearing in subsequent rules. In order to style appropriately links, you need to put the <code>:visited</code> rule after the <code>:link</code> rule but before the other ones, defined in the <em>LVHA-order</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>."},"<angle>":{"URL":"/en-US/docs/Web/CSS/angle","SUMMARY":"The <code><angle></code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> data type represents angle values. Positive angles represent right angles, negative angles represent left angles. Its syntax is a <a href=\"/en-US/docs/Web/CSS/number\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code><number></code></a> data type immediately followed by the unit (<code>deg</code>, <code>grad</code>, <code>rad</code> or <code>turn</code>). Like for any CSS dimension, there is no space between the unit literal and the number."},"<basic-shape>":{"URL":"/en-US/docs/Web/CSS/basic-shape","SUMMARY":"The <strong><code><basic-shape></code></strong> type can be specified using basic shape functions. When using this syntax to define shapes, the reference box is defined by each property that uses <code><basic-shape></code> values. The coordinate system for the shape has its origin on the top-left corner of the reference box with the x-axis running to the right and the y-axis running downwards. All the lengths expressed in percentages are resolved from the used dimensions of the reference box."},"<blend-mode>":{"URL":"/en-US/docs/Web/CSS/blend-mode","SUMMARY":"The <strong><code><blend-mode></code></strong> type is a collection of keywords describing blend modes."},"<color>":{"URL":"/en-US/docs/Web/CSS/color_value","SUMMARY":"The <code><color></code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> data type denotes a color in the <a class=\"external\" href=\"http://en.wikipedia.org/wiki/SRGB\" title=\"http://en.wikipedia.org/wiki/SRGB\">sRGB color space</a>. A color can be described in any of these ways:"},"<custom-ident>":{"URL":"/en-US/docs/Web/CSS/custom-ident","SUMMARY":"The <code><custom-ident></code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> data value denotes an arbitrary user-defined string used as an identifier. It is case-sensitive and in each context, several values are excluded to prevent misinterpretations."},"<gradient>":{"URL":"/en-US/docs/Web/CSS/gradient","SUMMARY":"The <code><gradient></code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> data type denotes a CSS <a href=\"/en-US/docs/Web/CSS/image\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code><image></code></a> made of a progressive transition between two or more colors. A CSS gradient is not a CSS <a href=\"/en-US/docs/Web/CSS/color_value\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code><color></code></a> but an image with <a href=\"/en-US/docs/CSS/image#no_intrinsic\" title=\"CSS/image#no_intrinsic\">no intrinsic dimensions</a>; that is, it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the one of the element it applies to."},"<image>":{"URL":"/en-US/docs/Web/CSS/image","SUMMARY":"The <code><image></code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> data type represents a 2D image. There are two kinds of images in CSS: plain static images, often referenced using a URL, and dynamically-generated images like gradients or representations of parts of the tree."},"<integer>":{"URL":"/en-US/docs/Web/CSS/integer","SUMMARY":"The <code><integer></code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> data type denotes an integer number, positive or negative. There isn't any associated unit with the value. An integer consists of one or several decimal digits, 0 to 9, optionally preceded by one single + or - sign."},"<length>":{"URL":"/en-US/docs/Web/CSS/length","SUMMARY":"The <code><length></code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> data type denotes distance measurements. It is a <a href=\"/en-US/docs/Web/CSS/number\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code><number></code></a> immediately followed by a length unit (<code>px</code>, <code>em</code>, <code>pc</code>, <code>in</code>, <code>mm</code>, …). Like for any CSS dimension, there is no space between the unit literal and the number. The length unit is optional after the <a href=\"/en-US/docs/Web/CSS/number\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code><number></code></a> <code>0</code>."},"<mq-boolean>":{"URL":"/en-US/docs/Web/CSS/mq-boolean","SUMMARY":"The <code><mq-boolean></code> <a href=\"/en-US/docs/Web/CSS\">CSS</a> data type denotes a boolean value used within <a href=\"/en-US/docs/Web/Guide/CSS/Media_queries\">media queries</a>. It's defined as an <a href=\"/en-US/docs/Web/CSS/integer\" title=\"The <integer> CSS data type denotes an integer number, positive or negative. There isn't any associated unit with the value. An integer consists of one or several decimal digits, 0 to 9, optionally preceded by one single + or - sign.\"><code>integer</code></a> with the value <code>0</code> or <code>1</code>. Zero represents false and one represents true. Any other integer value is invalid."},"<number>":{"URL":"/en-US/docs/Web/CSS/number","SUMMARY":"The <code><number></code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> data type represents a number, either integer or fractional. Its syntax extends the one of the <a href=\"/en-US/docs/Web/CSS/integer\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code><integer></code></a> data value. To represent a fractional value, add the fractional part — a '.' followed by one or several decimal digits — to any <a href=\"/en-US/docs/Web/CSS/integer\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code><integer></code></a> data value. Like for <a href=\"/en-US/docs/Web/CSS/integer\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code><integer></code></a> data type, there isn't any unit associated to a <code><number></code>, which is not a CSS dimension."},"<percentage>":{"URL":"/en-US/docs/Web/CSS/percentage","SUMMARY":"The <code><percentage></code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> data types represent a percentage value. Many <a href=\"/en/CSS_Reference\" title=\"en/CSS_Reference\">CSS properties</a> can take percentage values, often to define sizes in terms of parent objects. Percentages are formed by a <a href=\"/en-US/docs/Web/CSS/number\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code><number></code></a> immediately followed by the percentage sign <code>%</code>. Just as is the case with all other units in CSS, there isn't a space between the '%' and the number."},"<position>":{"URL":"/en-US/docs/Web/CSS/position_value","SUMMARY":"The <code><position></code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> data type denotes a coordinate in a 2D space used to set a location relative to a box."},"<ratio>":{"URL":"/en-US/docs/Web/CSS/ratio","SUMMARY":"The <code><ratio></code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> data type, used for describing aspect ratios in <a class=\"internal\" href=\"/En/CSS/Media_queries\" title=\"en/CSS/Media queries\">media queries</a>, denotes the proportion between two unitless values. It is a strictly positive <a href=\"/en-US/docs/Web/CSS/integer\" title=\"\"><code><integer></code></a> followed by a slash ('/', Unicode<code> U+002F SOLIDUS</code>) and a second strictly positive <a href=\"/en-US/docs/Web/CSS/integer\" title=\"\"><code><integer></code></a>. There may be spaces before and after the solidus."},"<resolution>":{"URL":"/en-US/docs/Web/CSS/resolution","SUMMARY":"The <code><resolution></code> <a href=\"/en-US/docs/Web/CSS\">CSS</a> data types, used in <a href=\"/en-US/docs/Web/Guide/CSS/Media_queries\">media queries</a>, denotes the density of pixels of an output device, its resolution. It is a <a href=\"/en-US/docs/Web/CSS/number\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code><number></code></a> immediately followed by a unit of resolution (<code>dpi</code>, <code>dpcm</code>, ...). Like for any CSS dimension, there is no space between the unit literal and the number."},"<shape>":{"URL":"/en-US/docs/Web/CSS/shape","SUMMARY":"The <code><shape></code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> data type denotes the specific form of a region. This region is used to define on which part of an element some properties like <a href=\"/en-US/docs/Web/CSS/clip\" title=\"\"><code>clip</code></a> do apply."},"<string>":{"URL":"/en-US/docs/Web/CSS/string","SUMMARY":"The <code><string></code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> data type represents a string. It is formed by a <a class=\"external\" href=\"http://en.wikipedia.org/wiki/Unicode\" title=\"http://en.wikipedia.org/wiki/Unicode\">Unicode</a> characters delimited by either double (\") or single (') quotes. A double quoted string cannot contain double quotes unless escaped using a backslash (\\). The same practice applies for single quoted strings, they cannot contain single quotes unless escaped using a backslash (\\). The backslash character must be escaped to be part of the string."},"<time>":{"URL":"/en-US/docs/Web/CSS/time","SUMMARY":"The <code><time></code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> data type denotes time dimensions expressed in seconds or milliseconds. They consists of a <a href=\"/en-US/docs/Web/CSS/number\" title=\"\"><code><number></code></a> immediately followed by the unit. Like for any CSS dimension, there is no space between the unit literal and the number."},"<timing-function>":{"URL":"/en-US/docs/Web/CSS/timing-function","SUMMARY":"The <code><timing-function></code> <a href=\"/en-US/docs/CSS\">CSS</a> data type denotes a mathematical function that describes how fast one-dimensional values change during transitions or animations. This in essence lets you establish an acceleration curve, so that the speed of the animation can vary over its duration. These functions are often called <em>easing functions<code>.</code></em>"},"<uri>":{"URL":"/en-US/docs/Web/CSS/uri","SUMMARY":"The <code><uri></code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> data type denotes a pointer to a resource. It has no proper syntax and can only be expressed through the <code>url()</code> functional notation."},"@charset":{"URL":"/en-US/docs/Web/CSS/@charset","SUMMARY":"The <code>@charset</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> <a href=\"/en/CSS/At-rule\" title=\"At-rule\">at-rule</a> specifies the character encoding used in the style sheet. It must be the first element in the style sheet and not be preceded by any character; as it is not a <a href=\"/en/CSS/Syntax#nested_statements\" title=\"en/CSS/Syntax#nested_statements\">nested statement</a>, it cannot be used inside <a href=\"/en/CSS/At-rule#Conditional_Group_Rules\" title=\"en/CSS/At-rule#Conditional_Group_Rules\">conditional group at-rules</a>. If several <code>@charset</code> at-rules are defined, only the first one is used, and it cannot be used inside a <code>style</code> attribute on an HTML element or inside the <a href=\"/en-US/docs/Web/HTML/Element/style\" title=\"The HTML Style Element (<style>) contains style information for a document, or part of a document. By default, the style instructions written inside that element are expected to be CSS.\"><code><style></code></a> element where the character set of the HTML page is relevant."},"@counter-style":{"URL":"/en-US/docs/Web/CSS/@counter-style","SUMMARY":"The <code>@counter-style</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> <a href=\"/en/CSS/At-rule\" title=\"en/CSS/At-rule\">at-rule</a> lets authors define specific counter styles that are not part of the predefined set of styles. A <code>@counter-style</code> rule defines how to convert a counter value into a string representation."},"@document":{"URL":"/en-US/docs/Web/CSS/@document","SUMMARY":"The <code>@document</code> rule is an at-rule that restricts the style rules contained within it based on the URL of the document. It is designed primarily for user style sheets. A <code>@document</code> rule can specify one or more matching functions. If any of the functions apply to a URL, the rule will take effect on that URL."},"@font-face":{"URL":"/en-US/docs/Web/CSS/@font-face","SUMMARY":"The <code>@font-face</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> <a href=\"/en-US/docs/CSS/At-rule\" title=\"At-rule\">at-rule</a> allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, <code>@font-face</code> eliminates the need to depend on the limited number of fonts users have installed on their computers. The <code>@font-face</code> at-rule may be used not only at the top level of a CSS, but also inside any <a href=\"/en-US/docs/CSS/At-rule#Conditional_Group_Rules\" title=\"CSS/At-rule#Conditional_Group_Rules\">CSS conditional-group at-rule</a>."},"@font-feature-values":{"URL":"/en-US/docs/Web/CSS/@font-feature-values","SUMMARY":"The <code>@font-feature-values</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> <a href=\"/en-US/docs/Web/CSS/At-rule\" title=\"At-rule\">at-rule</a> allows authors to use a common name in <a href=\"/en-US/docs/Web/CSS/font-variant-alternates\" title=\"The font-variant-alternates CSS property controls the usage of alternate glyphs associated to alternative names defined in @font-feature-values.\"><code>font-variant-alternates</code></a> for feature activated differently in OpenType. It allows to simplify the CSS when using several fonts."},"@import":{"URL":"/en-US/docs/Web/CSS/@import","SUMMARY":"The <code>@import</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> <a href=\"/en/CSS/At-rule\" title=\"At-rule\">at-rule</a> allows to import style rules from other style sheets. These rules must precede all other types of rules, except <a href=\"/en-US/docs/Web/CSS/@charset\" title=\"\"><code>@charset</code></a> rules; as it is not a <a href=\"/en/CSS/Syntax#nested_statements\" title=\"en/CSS/Syntax#nested_statements\">nested statement</a>, it cannot be used inside <a href=\"/en/CSS/At-rule#Conditional_Group_Rules\" title=\"en/CSS/At-rule#Conditional_Group_Rules\">conditional group at-rules</a>."},"@keyframes":{"URL":"/en-US/docs/Web/CSS/@keyframes","SUMMARY":"The <code>@keyframes</code> CSS at-rule lets authors control the intermediate steps in a CSS animation sequence by establishing keyframes (or waypoints) along the animation sequence that must be reached by certain points during the animation. This gives you more specific control over the intermediate steps of the animation sequence than you get when letting the browser handle everything automatically."},"@media":{"URL":"/en-US/docs/Web/CSS/@media","SUMMARY":"The <code>@media</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> <a href=\"/en/CSS/At-rule\" title=\"en/CSS/At-rule\">at-rule</a> associates a set of nested statements, in a CSS block that is delimited by curly braces, with a condition defined by a <a href=\"/en/CSS/Media_queries\" title=\"CSS media queries\">media query</a>. The <code>@media</code> at-rule may be used not only at the top level of a CSS, but also inside any <a href=\"/en/CSS/At-rule#Conditional_Group_Rules\" title=\"en/CSS/At-rule#Conditional_Group_Rules\">CSS conditional-group at-rule</a>."},"@namespace":{"URL":"/en-US/docs/Web/CSS/@namespace","SUMMARY":"The <code style=\"font-size: 14px;\">@namespace</code> rule is an at-rule that defines the <a href=\"/en-US/docs/Namespaces\">XML namespaces</a> that will be used in the style sheet. The namespaces defined can be used to restrict the <a href=\"/en-US/docs/Web/CSS/Universal_selectors\">universal</a>, <a href=\"/en-US/docs/Web/CSS/Type_selectors\">type</a>, and <a href=\"/en-US/docs/Web/CSS/Attribute_selectors\">attribute</a> selectors to only select elements under that namespace. <span style=\"line-height: 1.572;\">The </span><code style=\"font-size: 14px;\">@namespace</code><span style=\"line-height: 1.572;\"> rule is generally only useful when dealing with an XML document containing multiple namespaces - for example, an XHTML document with SVG embedded.</span>"},"@page":{"URL":"/en-US/docs/Web/CSS/@page","SUMMARY":"The <code>@page</code> CSS at-rule is used to modify some CSS properties when printing a document.<strong> </strong>You can't change all CSS properties with <code>@page</code>. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored."},"@supports":{"URL":"/en-US/docs/Web/CSS/@supports","SUMMARY":"The <code>@supports</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> <a href=\"/en/CSS/At-rule\" title=\"en/CSS/At-rule\">at-rule</a> associates a set of nested statements, in a CSS block, that is delimited by curly braces, with a condition consisting of testing of CSS declarations, that is property-value pairs, combined with arbitrary conjunctions, disjunctions, and negations of them. Such a condition is called a <em>supports condition</em>."},"Adjacent sibling selectors":{"URL":"/en-US/docs/Web/CSS/Adjacent_sibling_selectors","SUMMARY":"This is referred to as an adjacent selector. It will select only the specified element that immediately follows the former specified element."},"Alternative Style Sheets":{"URL":"/en-US/docs/Web/CSS/Alternative_style_sheets","SUMMARY":"Firefox offers support for\n <i>\n alternative style sheets</i>\n . Pages that provide alternative style sheets allow the user to select the style in which the page is displayed using the View>Page Style submenu. This provides a way for users to see multiple versions of a page, based on their needs or preferences."},"At-rule":{"URL":"/en-US/docs/Web/CSS/At-rule","SUMMARY":"An <strong>at-rule</strong> is a <a href=\"/en/CSS/Syntax#CSS_statements\" title=\"en/CSS/Syntax#CSS_statements\">CSS statement</a> beginning with an at sign, '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>), followed by an identifier, and ending at the first semi-colon, '<code>;</code>' (<code>U+003B SEMICOLON</code>), outside of a <a href=\"/en/CSS/Syntax#CSS_declarations\" title=\"en/CSS/Syntax#CSS_declarations\">block</a>, or at the end of the first <a href=\"/en/CSS/Syntax#CSS_declarations\" title=\"en/CSS/Syntax#CSS_declarations\">CSS block</a>."},"Attribute selectors":{"URL":"/en-US/docs/Web/CSS/Attribute_selectors","SUMMARY":"Attribute selectors select an element using the presence of a given attribute or attribute value."},"Box model":{"URL":"/en-US/docs/Web/CSS/box_model","SUMMARY":"In a document, each element is represented as a rectangular box. Determining the size, properties — like its color, background, borders aspect — and the position of these boxes is the goal of the rendering engine."},"CSS Properties Reference":{"URL":"/en-US/docs/Web/CSS/CSS_Properties_Reference","SUMMARY":"The following is a basic list of the most common CSS properties with the equivalent of the DOM notation which is usually accessed from JavaScript:"},"CSS Tutorials":{"URL":"/en-US/docs/Web/CSS/Tutorials","SUMMARY":"Learning CSS may be a daunting task. In order to help you, we have written numerous <strong>tutorials about CSS</strong>. Some are aimed at complete beginners, while others present complex features to be used by more experienced users."},"CSS animated properties":{"URL":"/en-US/docs/Web/CSS/CSS_animated_properties","SUMMARY":"This page lists all CSS properties and indicates if and how they are animatable."},"CSS descriptor definition":{"URL":"/en-US/docs/Web/CSS/CSS_descriptor_definition","SUMMARY":"This page lists CSS Descriptors used in defining Counter Styles, Device Adaptations, and Font Faces. In addition to the descriptors, the documentation lists @-rule bases, syntax, initial values, and percentage values."},"CSS documentation index":{"URL":"/en-US/docs/Web/CSS/Index","SUMMARY":"<strong>Found 592 pages:</strong>"},"CSS percentage values":{"URL":"/en-US/docs/Web/CSS/CSS_percentage_values","SUMMARY":"This page lists all CSS properties and indicates on the meaning of percentages value for each of them."},"CSS reference":{"URL":"/en-US/docs/Web/CSS/Reference","SUMMARY":"This <em>CSS Reference</em> lists all standard <a href=\"/en-US/docs/CSS\">CSS</a> properties, <a href=\"/en-US/docs/Web/CSS/Pseudo-classes\">pseudo-classes</a> and <a href=\"/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-elements</a>, <a href=\"/en-US/docs/Web/CSS/At-rule\">@-rules</a>, units, and selectors in alphabetic order. "},"CSS special properties":{"URL":"/en-US/docs/Web/CSS/CSS_special_properties","SUMMARY":"CSS special properties for Animations, Transitions, Transforms, Color, Columns, Text, Text Decorations, Flexible Boxes, Background, Borders, Boxes, Tables, Positions, Fonts, Images, Lists, Pages, Content, and more. The descriptors for property are definted, as well as notes on stacking content."},"CSS values serialization":{"URL":"/en-US/docs/Web/CSS/CSS_values_serialization","SUMMARY":"This page lists all CSS properties and indicates on which elements they have effects, how their computed values are calculated, and the canonical order to use when serializing values."},"CSS values syntax":{"URL":"/en-US/docs/Web/CSS/CSS_values_syntax","SUMMARY":"This page provides the CSS values syntax for Animations, Transitions, Transforms, Colors, Columns, Text, Fonts, Boxes, Background, Borders, Tables, Positioning, Images, Shapes, Pointers, Inline and more. The property call, as well as the syntax, initial values, inherited status and media applied to are all included."},"CSS3":{"URL":"/en-US/docs/Web/CSS/CSS3","SUMMARY":"<strong>CSS3</strong> is the latest evolution of the <em>Cascading Style Sheets</em> language and aims at extending CSS2.1. It brings a lot of long-awaited novelties, like rounded corners, shadows, <a href=\"/en-US/docs/Web/Guide/CSS/Using_CSS_gradients\" title=\"Using CSS gradients\">gradients</a>, <a href=\"/en-US/docs/Web/Guide/CSS/Using_CSS_transitions\" title=\"CSS transitions\">transitions</a> or <a href=\"/en-US/docs/Web/Guide/CSS/Using_CSS_animations\" title=\"CSS animations\">animations</a>, as well as new layouts like <a href=\"/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts\" title=\"Using CSS multi-column layouts\">multi-columns</a>, flexible box or grid layouts."},"Cascade":{"URL":"/en-US/docs/Web/CSS/Cascade","SUMMARY":"The <em>cascade</em> is a fundamental feature of CSS. It is an algorithm defining how to combine properties values originating from different sources. It lies at the core of CSS as stressed by its name: <em>Cascading</em> Style Sheets."},"Child selectors":{"URL":"/en-US/docs/Web/CSS/Child_selectors","SUMMARY":"The <code>></code> combinator separates two selectors and matches only those elements matched by the second selector that are <strong>direct</strong> children of elements matched by the first. By contrast, when two selectors are combined with the <a href=\"/en/CSS/Descendant_selectors\" title=\"https://developer.mozilla.org/en/CSS/Descendant_selectors\">descendant selector</a>, the combined selector expression matches those elements matched by the second selector for which there exists an ancestor element matched by the first selector, regardless of the number of \"hops\" up the DOM."},"Class selectors":{"URL":"/en-US/docs/Web/CSS/Class_selectors","SUMMARY":"In an HTML document, CSS class selectors match an element based on the contents of the element's class attribute. The class attribute is defined as a space-separated list of items, and one of those items must match exactly the class name given in the selector."},"Comments":{"URL":"/en-US/docs/Web/CSS/Comments","SUMMARY":"Comments are used to add explanatory notes or prevent the browser from interpreting parts of the stylesheet."},"Common CSS questions":{"URL":"/en-US/docs/Web/CSS/Common_CSS_Questions","SUMMARY":"Browsers use the <code>DOCTYPE</code> declaration to choose whether to show the document using a mode that is more compatible with Web standards or with old browser bugs. Using a correct and modern <code>DOCTYPE</code> declaration at the start of your HTML will improve browser standards compliance."},"Computed value":{"URL":"/en-US/docs/Web/CSS/computed_value","SUMMARY":"The <strong>computed value</strong> of a CSS property is computed from the specified value by:"},"Descendant selectors":{"URL":"/en-US/docs/Web/CSS/Descendant_selectors","SUMMARY":"The <code>␣</code> combinator (that's meant to represent a space, or more properly one or more whitespace characters) combines two selectors such that the combined selector matches only those elements matching the second selector for which there is an ancestor element matching the first selector. Descendant selectors are similar to <a href=\"/en/CSS/Child_selectors\" title=\"en/CSS/Child selectors\">child selectors</a>, but they do not require that the relationship between matched elements be strictly parent-child."},"Draft Implementations of CSS Features":{"URL":"/en-US/docs/Web/CSS/Draft_Implementations_of_CSS_Features","SUMMARY":"Mozilla supports a number of extensions to <a href=\"/en/CSS\" title=\"en/CSS\">CSS</a> that are prefixed with<code> -moz-</code>. The following list contains all Mozilla extensions that are implementations of features that are being standardized by the W3C. Proprietary features are omitted."},"FAQ":{"URL":"/en-US/docs/Web/CSS/FAQ","SUMMARY":""},"General sibling selectors":{"URL":"/en-US/docs/Web/CSS/General_sibling_selectors","SUMMARY":"The <code>~</code> combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent."},"ID selectors":{"URL":"/en-US/docs/Web/CSS/ID_selectors","SUMMARY":"In an HTML document, CSS ID selectors match an element based on the contents of that element's ID attribute, which must match exactly the value given in the selector."},"Layout mode":{"URL":"/en-US/docs/Web/CSS/Layout_mode","SUMMARY":"A <a href=\"/en-US/docs/CSS\" title=\"/en-US/docs/CSS\">CSS</a> <strong>layout mode</strong>, sometimes abbreviated as <em>layout<code>,</code></em> is an algorithm determining the position and the size of boxes based on the way they interact with their sibling and ancestor boxes. There are several of them:"},"List of Proprietary CSS Features":{"URL":"/en-US/docs/Web/CSS/List_of_Proprietary_CSS_Features","SUMMARY":"This list includes proprietary extensions to CSS in different browser engines which are not experimental implementations of features being standardized (see <a href=\"/en/CSS/Draft_Implementations_of_CSS_Features\" title=\"en/CSS/Draft_Implementations_of_CSS_Features\">Draft Implementations of CSS Features</a> for a list of these)."},"Margin collapsing":{"URL":"/en-US/docs/Web/CSS/margin_collapsing","SUMMARY":"<a href=\"/en-US/docs/CSS/margin-top\" title=\"CSS/margin-top\">Top</a> and <a href=\"/en-US/docs/CSS/margin-bottom\" title=\"CSS/margin-bottom\">bottom</a> margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as <strong>margin collapsing</strong>."},"Mozilla CSS support chart":{"URL":"/en-US/docs/Web/CSS/Mozilla_support_chart","SUMMARY":"This page lists supported CSS <a href=\"/en-US/docs/Mozilla_CSS_support_chart#Selectors\" title=\"Mozilla_CSS_support_chart#Selectors\">selectors</a>, <a href=\"/en-US/docs/Mozilla_CSS_support_chart#properties\" title=\"Mozilla_CSS_support_chart#properties\">properties</a>, <a href=\"/en-US/docs/Mozilla_CSS_support_chart#.40-rules\" title=\"Mozilla_CSS_support_chart#.40-rules\">@-rules</a>, <a href=\"/en-US/docs/Mozilla_CSS_support_chart#Media_queries\" title=\"Mozilla_CSS_support_chart#Media_queries\">Media queries</a> and <a href=\"/en-US/docs/Mozilla_CSS_support_chart#values_and_units\" title=\"Mozilla_CSS_support_chart#values_and_units\">values</a> in alphabetical order."},"Other Resources":{"URL":"/en-US/docs/Web/CSS/Other_Resources","SUMMARY":"Great external resources for CSS. "},"Paged Media":{"URL":"/en-US/docs/Web/CSS/Paged_Media","SUMMARY":"Paged media properties control the presentation of content for print or any other media that splits content into discrete pages. It allows you to set page breaks, control printable area, style left and right pages differently, and control breaks inside elements. Popularly supported properties include"},"Privacy and the :visited selector":{"URL":"/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector","SUMMARY":"Historically, the CSS <a href=\"/en-US/docs/Web/CSS/:visited\" title=\"\"><code>:visited</code></a> selector has been a way for sites to query the user's history, by using <code>getComputedStyle()</code> or other techniques to walk through the user's history to figure out what sites the user has visited. This can be done quickly, and makes it possible not only to determine where the user has been on the web, but can also be used to guess a lot of information about a user's identity."},"Pseudo-classes":{"URL":"/en-US/docs/Web/CSS/Pseudo-classes","SUMMARY":"A CSS <strong><em><dfn>pseudo-class</dfn></em></strong> is a keyword added to selectors that specifies a special state of the element to be selected. For example <a href=\"/en-US/docs/Web/CSS/:hover\" title=\"The :hover CSS pseudo-class matches when the user designates an element with a pointing device, but does not necessarily activate it. This style may be overridden by any other link-related pseudo-classes, that is :link, :visited, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :hover rule after the :link and :visited rules but before the :active one, as defined by the LVHA-order: :link — :visited — :hover — :active.\"><code>:hover</code></a> will apply a style when the user hovers over the element specified by the selector."},"Pseudo-elements":{"URL":"/en-US/docs/Web/CSS/Pseudo-elements","SUMMARY":"Just like <a href=\"/en-US/docs/Web/CSS/pseudo-classes\" title=\"A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.\"><code>pseudo-classes</code></a>, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document. For example, the <a href=\"/en-US/docs/Web/CSS/::first-line\" title=\"The ::first-line CSS pseudo-element applies styles only to the first line of an element. The amount of the text on the first line depends of numerous factors, like the width of the elements or of the document, but also of the font size of the text. As all pseudo-elements, the selectors containing ::first-line does not match any real HTML element.\"><code>::first-line</code></a> pseudo-element targets only the first line of an element specified by the selector."},"Replaced element":{"URL":"/en-US/docs/Web/CSS/Replaced_element","SUMMARY":"Editorial review completed."},"Resolved value":{"URL":"/en-US/docs/Web/CSS/resolved_value","SUMMARY":"The <strong>resolved value</strong> of a CSS property is the value returned by <a href=\"/en-US/docs/Web/API/Window.getComputedStyle\" title=\"The Window.getComputedStyle() method gives the values of all the CSS properties of an element after applying the active stylesheets and resolving any basic computation those values may contain.\"><code>getComputedStyle()</code></a>. For most properties, it is the <a href=\"/en-US/docs/Web/CSS/computed_value\" title=\"\"><code>computed value</code></a>, but for a few legacy properties (including <a href=\"/en-US/docs/Web/CSS/width\" title=\"\"><code>width</code></a> and <a href=\"/en-US/docs/Web/CSS/height\" title=\"\"><code>height</code></a>), it is instead the <a href=\"/en-US/docs/Web/CSS/used_value\" title=\"\"><code>used value</code></a>. See the specification link below for more per-property details."},"Scaling of SVG backgrounds":{"URL":"/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds","SUMMARY":"Given the flexibility of SVG images, there's a lot to keep in mind when using them as background images with the <a href=\"/en-US/docs/Web/CSS/background-image\"><code>background-image</code></a> property, and even more to keep in mind when also scaling them using the <a href=\"/en-US/docs/Web/CSS/background-size\"><code>background-size</code></a> property. This article describes how scaling of SVG images is handled when using these properties."},"Shorthand properties":{"URL":"/en-US/docs/Web/CSS/Shorthand_properties","SUMMARY":"<dfn>Shorthand properties</dfn> are CSS properties that let you set the values of several other CSS properties simultaneously. Using a shorthand property, a Web developer can write more concise and often more readable style sheets, saving time and energy."},"Specificity":{"URL":"/en-US/docs/Web/CSS/Specificity","SUMMARY":"Technical review completed."},"Syntax":{"URL":"/en-US/docs/Web/CSS/Syntax","SUMMARY":"The basic goal of the Cascading Stylesheet (<a href=\"/en/CSS\" title=\"CSS\">CSS</a>) language is to allow a browser engine to paint elements of the page with specific features, like colors, positioning, or decorations. The <em>CSS syntax</em> reflects this goal and its basic building blocks are:"},"Tools":{"URL":"/en-US/docs/Web/CSS/Tools","SUMMARY":"CSS offers a number of powerful features that can be tricky to use, or have a number of parameters that it's helpful to be able to visualize while you work. This page offers links to a number of useful tools that will help you build the CSS to style your content using these features."},"Type selectors":{"URL":"/en-US/docs/Web/CSS/Type_selectors","SUMMARY":"CSS type selectors match elements by node name. Used alone, therefore, a type selector for a particular node name selects all elements of that type — that is, with that node name — in the document."},"Universal selectors":{"URL":"/en-US/docs/Web/CSS/Universal_selectors","SUMMARY":"An Asterisk (<code>*</code>) is the universal selector for CSS. It matches a single element of any type. Omitting the asterisk with simple selectors has the same effect. For instance, <code>*.warning</code> and <code>.warning</code> are considered equal."},"Using CSS variables":{"URL":"/en-US/docs/Web/CSS/Using_CSS_variables","SUMMARY":"<strong>CSS Variables</strong> are entities defined by authors, or users, of Web pages to contain specific values throughout a document. They are set using custom properties and are accessed using a specific functional notation <code>var()</code>."},"Value definition syntax":{"URL":"/en-US/docs/Web/CSS/Value_definition_syntax","SUMMARY":""},"actual value":{"URL":"/en-US/docs/Web/CSS/actual_value","SUMMARY":"The <strong>actual value</strong> of a CSS property is the used value after all approximations have been applied. For example; a user agent may only be able to render borders with a integer pixel value and may be forced to approximate the computed width of the border."},"alias":{"URL":"/en-US/docs/Web/CSS/Alias","SUMMARY":"The<code> alias </code><a href=\"/en-US/docs/Web/CSS/cursor\" title=\"\"><code>cursor</code></a> value is used to indicate an alias or shortcut to something that is to be created. The alias cursor is often rendered as an arrow with a small curved arrow next to it."},"align-content":{"URL":"/en-US/docs/Web/CSS/align-content","SUMMARY":"The <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> <code>align-content</code> property aligns a flex container's lines within the flex container when there is extra space on the cross-axis."},"align-items":{"URL":"/en-US/docs/Web/CSS/align-items","SUMMARY":"The <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> <code>align-items</code> property aligns flex items of the current flex line the same way as <a href=\"/en/CSS/justify-content\" title=\"en/CSS/justify-content\"><code>justify-content</code></a> but in the perpendicular direction."},"align-self":{"URL":"/en-US/docs/Web/CSS/align-self","SUMMARY":"The <code>align-self</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property aligns flex items of the current flex line overriding the <a href=\"/en/CSS/align-items\" title=\"en/CSS/flex-align\"><code>align-items</code></a> value. If any of the flex item's cross-axis margin is set to <code>auto</code>, then <code>align-self</code> is ignored."},"all":{"URL":"/en-US/docs/Web/CSS/all","SUMMARY":"The CSS<em> all</em> shorthand property resets all properties, apart from <a href=\"/en-US/docs/Web/CSS/unicode-bidi\" title=\"The unicode-bidi CSS property together with the direction property relates to the handling of bidirectional text in a document. For example, if a block of text contains both left-to-right and right-to-left text then the user-agent uses a complex Unicode algorithm to decide how to display the text. This property overrides this algorithm and allows the developer to control the text embedding.\"><code>unicode-bidi</code></a> and <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, to their initial or inherited value."},"animation":{"URL":"/en-US/docs/Web/CSS/animation","SUMMARY":"The <code>animation</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property is a <a href=\"/en-US/docs/CSS/Shorthand_properties\" title=\"Shorthand properties\">shorthand property</a> for <a href=\"/en-US/docs/Web/CSS/animation-name\" title=\"The animation-name CSS property specifies a list of animations that should be applied to the selected element. Each name indicates a @keyframes at-rule that defines the property values for the animation sequence.\"><code>animation-name</code></a>, <a href=\"/en-US/docs/Web/CSS/animation-duration\" title=\"The animation-duration CSS property specifies the length of time that an animation should take to complete one cycle.\"><code>animation-duration</code></a>, <a href=\"/en-US/docs/Web/CSS/animation-timing-function\" title=\"The CSS animation-timing-function property specifies how a CSS animation should progress over the duration of each cycle. The possible values are one or several <timing-function>.\"><code>animation-timing-function</code></a>, <a href=\"/en-US/docs/Web/CSS/animation-delay\" title=\"The animation-delay CSS property specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element.\"><code>animation-delay</code></a>, <a href=\"/en-US/docs/Web/CSS/animation-iteration-count\" title=\"The animation-iteration-count CSS property defines the number of times an animation cycle should be played before stopping.\"><code>animation-iteration-count</code></a>, <a href=\"/en-US/docs/Web/CSS/animation-direction\" title=\"The animation-direction CSS property indicates whether the animation should play in reverse on alternate cycles.\"><code>animation-direction</code></a>, <a href=\"/en-US/docs/Web/CSS/animation-fill-mode\" title=\"The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.\"><code>animation-fill-mode</code></a> and <a href=\"/en-US/docs/Web/CSS/animation-play-state\" title=\"The animation-play-state CSS property determines whether an animation is running or paused. This can be queried to determine whether or not the animation is currently running. In addition, its value can be set to pause and resume playback of an animation.\"><code>animation-play-state</code></a>."},"animation-delay":{"URL":"/en-US/docs/Web/CSS/animation-delay","SUMMARY":"The <code>animation-delay</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element."},"animation-direction":{"URL":"/en-US/docs/Web/CSS/animation-direction","SUMMARY":"The <code>animation-direction</code> CSS property indicates whether the animation should play in reverse on alternate cycles."},"animation-duration":{"URL":"/en-US/docs/Web/CSS/animation-duration","SUMMARY":"The <code>animation-duration</code> CSS property specifies the length of time that an animation should take to complete one cycle."},"animation-fill-mode":{"URL":"/en-US/docs/Web/CSS/animation-fill-mode","SUMMARY":"The <code>animation-fill-mode</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property specifies how a CSS animation should apply styles to its target before and after it is executing."},"animation-iteration-count":{"URL":"/en-US/docs/Web/CSS/animation-iteration-count","SUMMARY":"The <code>animation-iteration-count</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property defines the number of times an animation cycle should be played before stopping."},"animation-name":{"URL":"/en-US/docs/Web/CSS/animation-name","SUMMARY":"The <code>animation-name</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property specifies a list of animations that should be applied to the selected element. Each name indicates a <a href=\"/en-US/docs/Web/CSS/@keyframes\" title=\"The @keyframes CSS at-rule lets authors control the intermediate steps in a CSS animation sequence by establishing keyframes (or waypoints) along the animation sequence that must be reached by certain points during the animation. This gives you more specific control over the intermediate steps of the animation sequence than you get when letting the browser handle everything automatically.\"><code>@keyframes</code></a> at-rule that defines the property values for the animation sequence."},"animation-play-state":{"URL":"/en-US/docs/Web/CSS/animation-play-state","SUMMARY":"The <code>animation-play-state</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property determines whether an animation is running or paused. This can be queried to determine whether or not the animation is currently running. In addition, its value can be set to pause and resume playback of an animation."},"animation-timing-function":{"URL":"/en-US/docs/Web/CSS/animation-timing-function","SUMMARY":"The <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> <code>animation-timing-function</code> property specifies how a CSS animation should progress over the duration of each cycle. The possible values are one or several <a href=\"/en-US/docs/Web/CSS/timing-function\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code><timing-function></code></a>."},"attr":{"URL":"/en-US/docs/Web/CSS/attr","SUMMARY":"The <code>attr()</code> <a href=\"/en-US/docs/Web/CSS\">CSS</a> function is used to retrieve the value of an attribute of the selected element and use it in the style sheet. It can be used on pseudo-elements too and, in this case, the value of the attribute on the <a href=\"/en-US/docs/Web/CSS/Pseudo-elements\">pseudo-element</a>'s originated element is returned."},"aural":{"URL":"/en-US/docs/Web/CSS/Aural","SUMMARY":"A <a href=\"/en-US/docs/CSS/@media#Media_groups\" title=\"CSS/@media#Media_groups\">media group</a> defined by the <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> standards."},"azimuth":{"URL":"/en-US/docs/Web/CSS/azimuth","SUMMARY":"In combination with<code> elevation</code>, <code>azimuth</code> 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."},"backface-visibility":{"URL":"/en-US/docs/Web/CSS/backface-visibility","SUMMARY":"The <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> <code>backface-visibility</code> property determines whether or not the back face of the element is visible when facing the user. The back face of an element always is a transparent background, letting, when visible, a mirror image of the front face be displayed."},"background":{"URL":"/en-US/docs/Web/CSS/background","SUMMARY":"The <code>background</code> CSS property is a shorthand for setting the individual background values in a single place in the style sheet. <code>background</code> can be used to set the values for one or more of: <a href=\"/en-US/docs/Web/CSS/background-clip\" title=\"The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.\"><code>background-clip</code></a>, <a href=\"/en-US/docs/Web/CSS/background-color\" title=\"The background-color CSS property sets the background color of an element, either through a color value or the keyword transparent.\"><code>background-color</code></a>, <a href=\"/en-US/docs/Web/CSS/background-image\" title=\"The CSS background-image property sets one or several background images for an element. The images are drawn on stacking context layers on top of each other. The first layer specified is drawn as if it is closest to the user.\"><code>background-image</code></a>, <a href=\"/en-US/docs/Web/CSS/background-origin\" title=\"The background-origin CSS property determines the background positioning area, that is the position of the origin of an image specified using the background-image CSS property.\"><code>background-origin</code></a>, <a href=\"/en-US/docs/Web/CSS/background-position\" title=\"The background-position CSS property sets the initial position, relative to the background position layer defined by background-origin for each defined background image.\"><code>background-position</code></a>, <a href=\"/en-US/docs/Web/CSS/background-repeat\" title=\"The background-repeat CSS property defines how background images are repeated. A background image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all.\"><code>background-repeat</code></a>, <a href=\"/en-US/docs/Web/CSS/background-size\" title=\"The background-size CSS property specifies the size of the background images. The size of the image can be fully constrained or only partially in order to preserve its intrinsic ratio.\"><code>background-size</code></a>, and <a href=\"/en-US/docs/Web/CSS/background-attachment\" title=\"If a background-image is specified, the background-attachment CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.\"><code>background-attachment</code></a>."},"background-attachment":{"URL":"/en-US/docs/Web/CSS/background-attachment","SUMMARY":"If a <a href=\"/en-US/docs/Web/CSS/background-image\" title=\"The CSS background-image property sets one or several background images for an element. The images are drawn on stacking context layers on top of each other. The first layer specified is drawn as if it is closest to the user. The borders of the element are then drawn on top of them, and the background-color is drawn beneath them.\"><code>background-image</code></a> is specified, the <code>background-attachment</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block."},"background-clip":{"URL":"/en-US/docs/Web/CSS/background-clip","SUMMARY":"The <code>background-clip</code> CSS property specifies whether an element's background, either the color or image, extends underneath its border."},"background-color":{"URL":"/en-US/docs/Web/CSS/background-color","SUMMARY":"The <code>background-color</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property sets the background color of an element, either through a color value or the keyword <code>transparent</code>."},"background-image":{"URL":"/en-US/docs/Web/CSS/background-image","SUMMARY":"The <a href=\"/en-US/docs/CSS\" title=\"/en-US/docs/CSS\">CSS</a> <code>background-image</code> property sets one or several background images for an element. The images are drawn on stacking context layers on top of each other. The first layer specified is drawn as if it is closest to the user."},"background-origin":{"URL":"/en-US/docs/Web/CSS/background-origin","SUMMARY":"The <code>background-origin</code> CSS property determines the background positioning area, that is the position of the origin of an image specified using the <a href=\"/en-US/docs/Web/CSS/background-image\" title=\"The CSS background-image property sets one or several background images for an element. The images are drawn on stacking context layers on top of each other. The first layer specified is drawn as if it is closest to the user.\"><code>background-image</code></a> CSS property."},"background-position":{"URL":"/en-US/docs/Web/CSS/background-position","SUMMARY":"The <code>background-position</code> CSS property sets the initial position, relative to the background position layer defined by <a href=\"/en-US/docs/Web/CSS/background-origin\" title=\"The background-origin CSS property determines the background positioning area, that is the position of the origin of an image specified using the background-image CSS property.\"><code>background-origin</code></a> for each defined background image."},"background-repeat":{"URL":"/en-US/docs/Web/CSS/background-repeat","SUMMARY":"The <code>background-repeat</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property defines how background images are repeated. A background image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all."},"background-size":{"URL":"/en-US/docs/Web/CSS/background-size","SUMMARY":"The <code>background-size</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property specifies the size of the background images. The size of the image can be fully constrained or only partially in order to preserve its intrinsic ratio."},"bleed":{"URL":"/en-US/docs/Web/CSS/bleed","SUMMARY":"This property specifies the extent of the page bleed area outside the page box. This property only has effect if crop marks are enabled using the <a href=\"/en-US/docs/Web/CSS/marks\" title=\"\"><code>marks</code></a> property."},"block-size":{"URL":"/en-US/docs/Web/CSS/block-size","SUMMARY":"The <code>block-size</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the horizontal or vertical size of an element's block depending on it's writing mode. It corresponds to the <a href=\"/en-US/docs/Web/CSS/width\" title=\"The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>width</code></a> or the <a href=\"/en-US/docs/Web/CSS/height\" title=\"The height CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>height</code></a> property depending on the value defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>."},"border":{"URL":"/en-US/docs/Web/CSS/border","SUMMARY":"The <code>border</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties\">shorthand property</a> for setting the individual border property values in a single place in the style sheet. <code>border</code> can be used to set the values for one or more of: <a href=\"/en-US/docs/Web/CSS/border-width\" title=\"The border-width property sets the width of the border of a box. Using the shorthand property border is often more convenient.\"><code>border-width</code></a>, <a href=\"/en-US/docs/Web/CSS/border-style\" title=\"The border-style property is a shorthand property for setting the line style for all four sides of the elements border.\"><code>border-style</code></a>, <a href=\"/en-US/docs/Web/CSS/border-color\" title=\"The border-color CSS property is a shorthand for setting the color of the four sides of an element's border: border-top-color, border-right-color, border-bottom-color, border-left-color\"><code>border-color</code></a>."},"border-block-end":{"URL":"/en-US/docs/Web/CSS/border-block-end","SUMMARY":"The <code>border-block-end</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property is a shorthand property for setting the individual logical block end border property values in a single place in the style sheet. <code>border-block-end</code> can be used to set the values for one or more of: <a href=\"/en-US/docs/Web/CSS/border-block-end-width\" title=\"The border-block-end-width CSS property defines the width of the logical block end border 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, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.\"><code>border-block-end-width</code></a>, <a href=\"/en-US/docs/Web/CSS/border-block-end-style\" title=\"The border-block-end-style CSS property defines the style of the logical block end border 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, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation.\"><code>border-block-end-style</code></a>, <a href=\"/en-US/docs/Web/CSS/border-block-end-color\" title=\"The border-block-end-color CSS property defines the color of the logical block end border 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, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.\"><code>border-block-end-color</code></a>. It maps to a physical border depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"/en-US/docs/Web/CSS/border-top\" title=\"The border-top CSS property is a shorthand that sets the values of border-top-color, border-top-style, and border-top-width. These properties describe the top border of elements.\"><code>border-top</code></a>, <a href=\"/en-US/docs/Web/CSS/border-right\" title=\"The border-right CSS property is a shorthand that sets the values of border-right-color, border-right-style, and border-right-width. These properties describe the right border of elements.\"><code>border-right</code></a>, <a href=\"/en-US/docs/Web/CSS/border-bottom\" title=\"The border-bottom CSS property is a shorthand that sets the values of border-bottom-color, border-bottom-style, and border-bottom-width. These properties describe the bottom border of elements.\"><code>border-bottom</code></a>, or <a href=\"/en-US/docs/Web/CSS/border-left\" title=\"The border-left CSS property is a shorthand that sets the values of border-left-color, border-left-style, and border-left-width. These properties describe the left border of elements.\"><code>border-left</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"border-block-end-color":{"URL":"/en-US/docs/Web/CSS/border-block-end-color","SUMMARY":"The <code>border-block-end-color</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the color of the logical block end border 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 <a href=\"/en-US/docs/Web/CSS/border-top-color\" title=\"The border-top-color CSS property sets the color of the top border of an element. Note that in many cases the shorthand CSS properties border-color or border-top are more convenient and preferable.\"><code>border-top-color</code></a>, <a href=\"/en-US/docs/Web/CSS/border-right-color\" title=\"The border-right-color CSS property sets the color of the right border of an element. Note that in many cases the shorthand CSS properties  border-color or border-right are more convenient and preferable.\"><code>border-right-color</code></a>, <a href=\"/en-US/docs/Web/CSS/border-bottom-color\" title=\"The border-bottom-color CSS property sets the color of the bottom border of an element. Note that in many cases the shorthand CSS properties border-color or border-bottom are more convenient and preferable.\"><code>border-bottom-color</code></a>, or <a href=\"/en-US/docs/Web/CSS/border-left-color\" title=\"The border-left-color CSS property sets the color of the bottom border of an element. Note that in many cases the shorthand CSS properties border-color or border-left are more convenient and preferable.\"><code>border-left-color</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"border-block-end-style":{"URL":"/en-US/docs/Web/CSS/border-block-end-style","SUMMARY":"The <code>border-block-end-style</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the style of the logical block end border 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 <a href=\"/en-US/docs/Web/CSS/border-top-style\" title=\"The border-top-style CSS property sets the line style of the top border of a box.\"><code>border-top-style</code></a>, <a href=\"/en-US/docs/Web/CSS/border-right-style\" title=\"The border-right-style CSS property sets the line style of the right border of a box.\"><code>border-right-style</code></a>, <a href=\"/en-US/docs/Web/CSS/border-bottom-style\" title=\"The border-bottom-style CSS property sets the line style of the bottom border of a box.\"><code>border-bottom-style</code></a>, or <a href=\"/en-US/docs/Web/CSS/border-left-style\" title=\"The border-left-style CSS property sets the line style of the left border of a box.\"><code>border-left-style</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"border-block-end-width":{"URL":"/en-US/docs/Web/CSS/border-block-end-width","SUMMARY":"The <code>border-block-end-width</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the width of the logical block end border 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 <a href=\"/en-US/docs/Web/CSS/border-top-width\" title=\"The border-top-width CSS property sets the width of the top border of a box.\"><code>border-top-width</code></a>, <a href=\"/en-US/docs/Web/CSS/border-right-width\" title=\"The border-right-width CSS property sets the width of the right border of a box.\"><code>border-right-width</code></a>, <a href=\"/en-US/docs/Web/CSS/border-bottom-width\" title=\"The border-bottom-width CSS property sets the width of the bottom border of a box.\"><code>border-bottom-width</code></a>, or <a href=\"/en-US/docs/Web/CSS/border-left-width\" title=\"The border-left-width CSS property sets the width of the left border of a box.\"><code>border-left-width</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"border-block-start":{"URL":"/en-US/docs/Web/CSS/border-block-start","SUMMARY":"The <code>border-block-start</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property is a shorthand property for setting the individual logical block start border property values in a single place in the style sheet. <code>border-block-start</code> can be used to set the values for one or more of: <a href=\"/en-US/docs/Web/CSS/border-block-start-width\" title=\"The border-block-start-width CSS property defines the width of the logical block start border 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, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.\"><code>border-block-start-width</code></a>, <a href=\"/en-US/docs/Web/CSS/border-block-start-style\" title=\"The border-block-start-style CSS property defines the style of the logical block start border 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, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation.\"><code>border-block-start-style</code></a>, <a href=\"/en-US/docs/Web/CSS/border-block-start-color\" title=\"The border-block-start-color CSS property defines the color of the logical block start border 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, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.\"><code>border-block-start-color</code></a>. It maps to a physical border depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"/en-US/docs/Web/CSS/border-top\" title=\"The border-top CSS property is a shorthand that sets the values of border-top-color, border-top-style, and border-top-width. These properties describe the top border of elements.\"><code>border-top</code></a>, <a href=\"/en-US/docs/Web/CSS/border-right\" title=\"The border-right CSS property is a shorthand that sets the values of border-right-color, border-right-style, and border-right-width. These properties describe the right border of elements.\"><code>border-right</code></a>, <a href=\"/en-US/docs/Web/CSS/border-bottom\" title=\"The border-bottom CSS property is a shorthand that sets the values of border-bottom-color, border-bottom-style, and border-bottom-width. These properties describe the bottom border of elements.\"><code>border-bottom</code></a>, or <a href=\"/en-US/docs/Web/CSS/border-left\" title=\"The border-left CSS property is a shorthand that sets the values of border-left-color, border-left-style, and border-left-width. These properties describe the left border of elements.\"><code>border-left</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"border-block-start-color":{"URL":"/en-US/docs/Web/CSS/border-block-start-color","SUMMARY":"The <code>border-block-start-color</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the color of the logical block start border 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 <a href=\"/en-US/docs/Web/CSS/border-top-color\" title=\"The border-top-color CSS property sets the color of the top border of an element. Note that in many cases the shorthand CSS properties border-color or border-top are more convenient and preferable.\"><code>border-top-color</code></a>, <a href=\"/en-US/docs/Web/CSS/border-right-color\" title=\"The border-right-color CSS property sets the color of the right border of an element. Note that in many cases the shorthand CSS properties  border-color or border-right are more convenient and preferable.\"><code>border-right-color</code></a>, <a href=\"/en-US/docs/Web/CSS/border-bottom-color\" title=\"The border-bottom-color CSS property sets the color of the bottom border of an element. Note that in many cases the shorthand CSS properties border-color or border-bottom are more convenient and preferable.\"><code>border-bottom-color</code></a>, or <a href=\"/en-US/docs/Web/CSS/border-left-color\" title=\"The border-left-color CSS property sets the color of the bottom border of an element. Note that in many cases the shorthand CSS properties border-color or border-left are more convenient and preferable.\"><code>border-left-color</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"border-block-start-style":{"URL":"/en-US/docs/Web/CSS/border-block-start-style","SUMMARY":"The <code>border-block-start-style</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the style of the logical block start border 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 <a href=\"/en-US/docs/Web/CSS/border-top-style\" title=\"The border-top-style CSS property sets the line style of the top border of a box.\"><code>border-top-style</code></a>, <a href=\"/en-US/docs/Web/CSS/border-right-style\" title=\"The border-right-style CSS property sets the line style of the right border of a box.\"><code>border-right-style</code></a>, <a href=\"/en-US/docs/Web/CSS/border-bottom-style\" title=\"The border-bottom-style CSS property sets the line style of the bottom border of a box.\"><code>border-bottom-style</code></a>, or <a href=\"/en-US/docs/Web/CSS/border-left-style\" title=\"The border-left-style CSS property sets the line style of the left border of a box.\"><code>border-left-style</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"border-block-start-width":{"URL":"/en-US/docs/Web/CSS/border-block-start-width","SUMMARY":"The <code>border-block-start-width</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the width of the logical block start border 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 <a href=\"/en-US/docs/Web/CSS/border-top-width\" title=\"The border-top-width CSS property sets the width of the top border of a box.\"><code>border-top-width</code></a>, <a href=\"/en-US/docs/Web/CSS/border-right-width\" title=\"The border-right-width CSS property sets the width of the right border of a box.\"><code>border-right-width</code></a>, <a href=\"/en-US/docs/Web/CSS/border-bottom-width\" title=\"The border-bottom-width CSS property sets the width of the bottom border of a box.\"><code>border-bottom-width</code></a>, or <a href=\"/en-US/docs/Web/CSS/border-left-width\" title=\"The border-left-width CSS property sets the width of the left border of a box.\"><code>border-left-width</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"border-bottom":{"URL":"/en-US/docs/Web/CSS/border-bottom","SUMMARY":"The <code>border-bottom</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property is a shorthand that sets the values of <a href=\"/en-US/docs/Web/CSS/border-bottom-color\" title=\"The border-bottom-color CSS property sets the color of the bottom border of an element. Note that in many cases the shorthand CSS properties border-color or border-bottom are more convenient and preferable.\"><code>border-bottom-color</code></a>, <a href=\"/en-US/docs/Web/CSS/border-bottom-style\" title=\"The border-bottom-style CSS property sets the line style of the bottom border of a box.\"><code>border-bottom-style</code></a>, and <a href=\"/en-US/docs/Web/CSS/border-bottom-width\" title=\"The border-bottom-width CSS property sets the width of the bottom border of a box.\"><code>border-bottom-width</code></a>. These properties describe the bottom border of elements."},"border-bottom-color":{"URL":"/en-US/docs/Web/CSS/border-bottom-color","SUMMARY":"The <code>border-bottom-color</code> CSS property sets the color of the bottom border of an element. Note that in many cases the shorthand CSS properties <a href=\"/en-US/docs/Web/CSS/border-color\" title=\"The border-color CSS property is a shorthand for setting the color of the four sides of an element's border: border-top-color, border-right-color, border-bottom-color, border-left-color\"><code>border-color</code></a> or <a href=\"/en-US/docs/Web/CSS/border-bottom\" title=\"The border-bottom CSS property is a shorthand that sets the values of border-bottom-color, border-bottom-style, and border-bottom-width. These properties describe the bottom border of elements.\"><code>border-bottom</code></a> are more convenient and preferable."},"border-bottom-left-radius":{"URL":"/en-US/docs/Web/CSS/border-bottom-left-radius","SUMMARY":"The <code>border-bottom-left-radius</code> CSS property sets the rounding of the bottom-left corner of the element. The rounding can be a circle or an ellipse, or if one of the value is <code>0</code> no rounding is done and the corner is square."},"border-bottom-right-radius":{"URL":"/en-US/docs/Web/CSS/border-bottom-right-radius","SUMMARY":"The <code>border-bottom-right-radius</code> CSS property sets the rounding of the bottom-right corner of the element. The rounding can be a circle or an ellipse, or if one of the value is <code>0</code> no rounding is done and the corner is square."},"border-bottom-style":{"URL":"/en-US/docs/Web/CSS/border-bottom-style","SUMMARY":"The <code>border-bottom-style</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property sets the line style of the bottom border of a box."},"border-bottom-width":{"URL":"/en-US/docs/Web/CSS/border-bottom-width","SUMMARY":"The <code>border-bottom-width</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property sets the width of the bottom border of a box."},"border-collapse":{"URL":"/en-US/docs/Web/CSS/border-collapse","SUMMARY":"The <code>border-collapse</code> CSS property determines whether a table's borders are separated or collapsed. In the separated model, adjacent cells each have their own distinct borders. In the collapsed model, adjacent table cells share borders."},"border-color":{"URL":"/en-US/docs/Web/CSS/border-color","SUMMARY":"The <code>border-color</code> CSS property is a shorthand for setting the color of the four sides of an element's border: <a href=\"/en-US/docs/Web/CSS/border-top-color\" title=\"The border-top-color CSS property sets the color of the top border of an element. Note that in many cases the shorthand CSS properties border-color or border-top are more convenient and preferable.\"><code>border-top-color</code></a>, <a href=\"/en-US/docs/Web/CSS/border-right-color\" title=\"The border-right-color CSS property sets the color of the right border of an element. Note that in many cases the shorthand CSS properties  border-color or border-right are more convenient and preferable.\"><code>border-right-color</code></a>, <a href=\"/en-US/docs/Web/CSS/border-bottom-color\" title=\"The border-bottom-color CSS property sets the color of the bottom border of an element. Note that in many cases the shorthand CSS properties border-color or border-bottom are more convenient and preferable.\"><code>border-bottom-color</code></a>, <a href=\"/en-US/docs/Web/CSS/border-left-color\" title=\"The border-left-color CSS property sets the color of the bottom border of an element. Note that in many cases the shorthand CSS properties border-color or border-left are more convenient and preferable.\"><code>border-left-color</code></a>"},"border-image":{"URL":"/en-US/docs/Web/CSS/border-image","SUMMARY":"The <code>border-image</code> CSS property allows drawing an image on the borders of elements. This makes drawing complex looking widgets much simpler than it has been and removes the need for nine boxes in some cases. The <code>border-image</code> is used instead of the border styles given by the <a href=\"/en-US/docs/Web/CSS/border-style\" title=\"The border-style property is a shorthand property for setting the line style for all four sides of the elements border.\"><code>border-style</code></a> properties."},"border-image-outset":{"URL":"/en-US/docs/Web/CSS/border-image-outset","SUMMARY":"The <code>border-image-outset</code> property describes by what amount the <dfn>border image area</dfn> extends beyond the border box."},"border-image-repeat":{"URL":"/en-US/docs/Web/CSS/border-image-repeat","SUMMARY":"The <code>border-image-repeat</code> CSS property defines how the middle part of a border image is handled so that it can match the size of the border. It has a one-value syntax that describes the behavior of all the sides, and a two-value syntax that sets a different value for the horizontal and vertical behavior."},"border-image-slice":{"URL":"/en-US/docs/Web/CSS/border-image-slice","SUMMARY":"The <code>border-image-slice</code> CSS property divides the image specified by <a href=\"/en-US/docs/Web/CSS/border-image-source\" title=\"The border-image-source CSS property defines the <image> to use instead of the style of the border. If this property is set to none, the style defined by border-style is used instead.\"><code>border-image-source</code></a> in nine regions: the four corners, the four edges and the middle. It does this by specifying 4 inwards offsets."},"border-image-source":{"URL":"/en-US/docs/Web/CSS/border-image-source","SUMMARY":"The <code>border-image-source</code> CSS property defines the <a href=\"/en-US/docs/Web/CSS/image\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code><image></code></a> to use instead of the style of the border. If this property is set to <code>none</code>, the style defined by <a href=\"/en-US/docs/Web/CSS/border-style\" title=\"Technical review completed.\"><code>border-style</code></a> is used instead."},"border-image-width":{"URL":"/en-US/docs/Web/CSS/border-image-width","SUMMARY":"The <code>border-image-width</code> CSS property defines the width of the border. If specified it overrides the <a href=\"/en-US/docs/Web/CSS/border-width\" title=\"The border-width property sets the width of the border of a box. Using the shorthand property border is often more convenient.\"><code>border-width</code></a> property."},"border-inline-end":{"URL":"/en-US/docs/Web/CSS/border-inline-end","SUMMARY":"The <code>border-inline-end</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property is a shorthand property for setting the individual logical inline end border property values in a single place in the style sheet. <code>border-inline-end</code> can be used to set the values for one or more of: <a href=\"/en-US/docs/Web/CSS/border-inline-end-width\" title=\"The border-inline-end-width CSS property defines the width of the logical inline end border 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, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.\"><code>border-inline-end-width</code></a>, <a href=\"/en-US/docs/Web/CSS/border-inline-end-style\" title=\"The border-inline-end-style CSS property defines the style of the logical inline end border 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, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation.\"><code>border-inline-end-style</code></a>, <a href=\"/en-US/docs/Web/CSS/border-inline-end-color\" title=\"The border-inline-end-color CSS property defines the color of the logical inline end border 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, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.\"><code>border-inline-end-color</code></a>. It maps to a physical border depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"/en-US/docs/Web/CSS/border-top\" title=\"The border-top CSS property is a shorthand that sets the values of border-top-color, border-top-style, and border-top-width. These properties describe the top border of elements.\"><code>border-top</code></a>, <a href=\"/en-US/docs/Web/CSS/border-right\" title=\"The border-right CSS property is a shorthand that sets the values of border-right-color, border-right-style, and border-right-width. These properties describe the right border of elements.\"><code>border-right</code></a>, <a href=\"/en-US/docs/Web/CSS/border-bottom\" title=\"The border-bottom CSS property is a shorthand that sets the values of border-bottom-color, border-bottom-style, and border-bottom-width. These properties describe the bottom border of elements.\"><code>border-bottom</code></a>, or <a href=\"/en-US/docs/Web/CSS/border-left\" title=\"The border-left CSS property is a shorthand that sets the values of border-left-color, border-left-style, and border-left-width. These properties describe the left border of elements.\"><code>border-left</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"border-inline-end-color":{"URL":"/en-US/docs/Web/CSS/border-inline-end-color","SUMMARY":"The <code>border-inline-end-color</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the color of the logical inline end border 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 <a href=\"/en-US/docs/Web/CSS/border-top-color\" title=\"The border-top-color CSS property sets the color of the top border of an element. Note that in many cases the shorthand CSS properties border-color or border-top are more convenient and preferable.\"><code>border-top-color</code></a>, <a href=\"/en-US/docs/Web/CSS/border-right-color\" title=\"The border-right-color CSS property sets the color of the right border of an element. Note that in many cases the shorthand CSS properties  border-color or border-right are more convenient and preferable.\"><code>border-right-color</code></a>, <a href=\"/en-US/docs/Web/CSS/border-bottom-color\" title=\"The border-bottom-color CSS property sets the color of the bottom border of an element. Note that in many cases the shorthand CSS properties border-color or border-bottom are more convenient and preferable.\"><code>border-bottom-color</code></a>, or <a href=\"/en-US/docs/Web/CSS/border-left-color\" title=\"The border-left-color CSS property sets the color of the bottom border of an element. Note that in many cases the shorthand CSS properties border-color or border-left are more convenient and preferable.\"><code>border-left-color</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"border-inline-end-style":{"URL":"/en-US/docs/Web/CSS/border-inline-end-style","SUMMARY":"The <code>border-inline-end-style</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the style of the logical inline end border 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 <a href=\"/en-US/docs/Web/CSS/border-top-style\" title=\"The border-top-style CSS property sets the line style of the top border of a box.\"><code>border-top-style</code></a>, <a href=\"/en-US/docs/Web/CSS/border-right-style\" title=\"The border-right-style CSS property sets the line style of the right border of a box.\"><code>border-right-style</code></a>, <a href=\"/en-US/docs/Web/CSS/border-bottom-style\" title=\"The border-bottom-style CSS property sets the line style of the bottom border of a box.\"><code>border-bottom-style</code></a>, or <a href=\"/en-US/docs/Web/CSS/border-left-style\" title=\"The border-left-style CSS property sets the line style of the left border of a box.\"><code>border-left-style</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"border-inline-end-width":{"URL":"/en-US/docs/Web/CSS/border-inline-end-width","SUMMARY":"The <code>border-inline-end-width</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the width of the logical inline end border 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 <a href=\"/en-US/docs/Web/CSS/border-top-width\" title=\"The border-top-width CSS property sets the width of the top border of a box.\"><code>border-top-width</code></a>, <a href=\"/en-US/docs/Web/CSS/border-right-width\" title=\"The border-right-width CSS property sets the width of the right border of a box.\"><code>border-right-width</code></a>, <a href=\"/en-US/docs/Web/CSS/border-bottom-width\" title=\"The border-bottom-width CSS property sets the width of the bottom border of a box.\"><code>border-bottom-width</code></a>, or <a href=\"/en-US/docs/Web/CSS/border-left-width\" title=\"The border-left-width CSS property sets the width of the left border of a box.\"><code>border-left-width</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"border-inline-start":{"URL":"/en-US/docs/Web/CSS/border-inline-start","SUMMARY":"The <code>border-inline-start</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property is a shorthand property for setting the individual logical inline start border property values in a single place in the style sheet. <code>border-inline-start</code> can be used to set the values for one or more of: <a href=\"/en-US/docs/Web/CSS/border-inline-start-width\" title=\"The border-inline-start-width CSS property defines the width of the logical inline start border 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, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.\"><code>border-inline-start-width</code></a>, <a href=\"/en-US/docs/Web/CSS/border-inline-start-style\" title=\"The border-inline-start-style CSS property defines the style of the logical inline start border 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, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation.\"><code>border-inline-start-style</code></a>, <a href=\"/en-US/docs/Web/CSS/border-inline-start-color\" title=\"The border-inline-start-color CSS property defines the color of the logical inline start border 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, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.\"><code>border-inline-start-color</code></a>. It maps to a physical border depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"/en-US/docs/Web/CSS/border-top\" title=\"The border-top CSS property is a shorthand that sets the values of border-top-color, border-top-style, and border-top-width. These properties describe the top border of elements.\"><code>border-top</code></a>, <a href=\"/en-US/docs/Web/CSS/border-right\" title=\"The border-right CSS property is a shorthand that sets the values of border-right-color, border-right-style, and border-right-width. These properties describe the right border of elements.\"><code>border-right</code></a>, <a href=\"/en-US/docs/Web/CSS/border-bottom\" title=\"The border-bottom CSS property is a shorthand that sets the values of border-bottom-color, border-bottom-style, and border-bottom-width. These properties describe the bottom border of elements.\"><code>border-bottom</code></a>, or <a href=\"/en-US/docs/Web/CSS/border-left\" title=\"The border-left CSS property is a shorthand that sets the values of border-left-color, border-left-style, and border-left-width. These properties describe the left border of elements.\"><code>border-left</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"border-inline-start-color":{"URL":"/en-US/docs/Web/CSS/border-inline-start-color","SUMMARY":"The <code>border-inline-start-color</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the color of the logical inline start border 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 <a href=\"/en-US/docs/Web/CSS/border-top-color\" title=\"The border-top-color CSS property sets the color of the top border of an element. Note that in many cases the shorthand CSS properties border-color or border-top are more convenient and preferable.\"><code>border-top-color</code></a>, <a href=\"/en-US/docs/Web/CSS/border-right-color\" title=\"The border-right-color CSS property sets the color of the right border of an element. Note that in many cases the shorthand CSS properties  border-color or border-right are more convenient and preferable.\"><code>border-right-color</code></a>, <a href=\"/en-US/docs/Web/CSS/border-bottom-color\" title=\"The border-bottom-color CSS property sets the color of the bottom border of an element. Note that in many cases the shorthand CSS properties border-color or border-bottom are more convenient and preferable.\"><code>border-bottom-color</code></a>, or <a href=\"/en-US/docs/Web/CSS/border-left-color\" title=\"The border-left-color CSS property sets the color of the bottom border of an element. Note that in many cases the shorthand CSS properties border-color or border-left are more convenient and preferable.\"><code>border-left-color</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"CSS Writing Modes Level 3 defines CSS features to support various international script modes, such as left-to-right (e.g., Latin and Indic), right-to-left (e.g., Hebrew and Arabic), bidirectional (e.g., mixed Latin and Arabic) and vertical (e.g., Asian). This article is about the CSS writing-mode property.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"border-inline-start-style":{"URL":"/en-US/docs/Web/CSS/border-inline-start-style","SUMMARY":"The <code>border-inline-start-style</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the style of the logical inline start border 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 <a href=\"/en-US/docs/Web/CSS/border-top-style\" title=\"The border-top-style CSS property sets the line style of the top border of a box.\"><code>border-top-style</code></a>, <a href=\"/en-US/docs/Web/CSS/border-right-style\" title=\"The border-right-style CSS property sets the line style of the right border of a box.\"><code>border-right-style</code></a>, <a href=\"/en-US/docs/Web/CSS/border-bottom-style\" title=\"The border-bottom-style CSS property sets the line style of the bottom border of a box.\"><code>border-bottom-style</code></a>, or <a href=\"/en-US/docs/Web/CSS/border-left-style\" title=\"The border-left-style CSS property sets the line style of the left border of a box.\"><code>border-left-style</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"border-inline-start-width":{"URL":"/en-US/docs/Web/CSS/border-inline-start-width","SUMMARY":"The <code>border-inline-start-width</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the width of the logical inline start border 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 <a href=\"/en-US/docs/Web/CSS/border-top-width\" title=\"The border-top-width CSS property sets the width of the top border of a box.\"><code>border-top-width</code></a>, <a href=\"/en-US/docs/Web/CSS/border-right-width\" title=\"The border-right-width CSS property sets the width of the right border of a box.\"><code>border-right-width</code></a>, <a href=\"/en-US/docs/Web/CSS/border-bottom-width\" title=\"The border-bottom-width CSS property sets the width of the bottom border of a box.\"><code>border-bottom-width</code></a>, or <a href=\"/en-US/docs/Web/CSS/border-left-width\" title=\"The border-left-width CSS property sets the width of the left border of a box.\"><code>border-left-width</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"border-left":{"URL":"/en-US/docs/Web/CSS/border-left","SUMMARY":"The <code>border-left</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property is a shorthand that sets the values of <a href=\"/en-US/docs/Web/CSS/border-left-color\" title=\"The border-left-color CSS property sets the color of the bottom border of an element. Note that in many cases the shorthand CSS properties border-color or border-left are more convenient and preferable.\"><code>border-left-color</code></a>, <a href=\"/en-US/docs/Web/CSS/border-left-style\" title=\"The border-left-style CSS property sets the line style of the left border of a box.\"><code>border-left-style</code></a>, and <a href=\"/en-US/docs/Web/CSS/border-left-width\" title=\"The border-left-width CSS property sets the width of the left border of a box.\"><code>border-left-width</code></a>. These properties describe the left border of elements."},"border-left-color":{"URL":"/en-US/docs/Web/CSS/border-left-color","SUMMARY":"The <code>border-left-color</code> CSS property sets the color of the bottom border of an element. Note that in many cases the shorthand CSS properties <a href=\"/en-US/docs/Web/CSS/border-color\" title=\"The border-color CSS property is a shorthand for setting the color of the four sides of an element's border: border-top-color, border-right-color, border-bottom-color, border-left-color\"><code>border-color</code></a> or <a href=\"/en-US/docs/Web/CSS/border-left\" title=\"The border-left CSS property is a shorthand that sets the values of border-left-color, border-left-style, and border-left-width. These properties describe the left border of elements.\"><code>border-left</code></a> are more convenient and preferable."},"border-left-style":{"URL":"/en-US/docs/Web/CSS/border-left-style","SUMMARY":"The <code>border-left-style</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property sets the line style of the left border of a box."},"border-left-width":{"URL":"/en-US/docs/Web/CSS/border-left-width","SUMMARY":"The <code>border-left-width</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property sets the width of the left border of a box."},"border-radius":{"URL":"/en-US/docs/Web/CSS/border-radius","SUMMARY":"The <code>border-radius</code> CSS property allows Web authors to define how rounded border corners are. The curve of each corner is defined using one or two radii, defining its shape: circle or ellipse."},"border-right":{"URL":"/en-US/docs/Web/CSS/border-right","SUMMARY":"The <code>border-right</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property is a shorthand that sets the values of <a href=\"/en-US/docs/Web/CSS/border-right-color\" title=\"The border-right-color CSS property sets the color of the right border of an element. Note that in many cases the shorthand CSS properties  border-color or border-right are more convenient and preferable.\"><code>border-right-color</code></a>, <a href=\"/en-US/docs/Web/CSS/border-right-style\" title=\"The border-right-style CSS property sets the line style of the right border of a box.\"><code>border-right-style</code></a>, and <a href=\"/en-US/docs/Web/CSS/border-right-width\" title=\"The border-right-width CSS property sets the width of the right border of a box.\"><code>border-right-width</code></a>. These properties describe the right border of elements."},"border-right-color":{"URL":"/en-US/docs/Web/CSS/border-right-color","SUMMARY":"The <code>border-right-color</code> CSS property sets the color of the right border of an element. Note that in many cases the shorthand CSS properties <a href=\"/en-US/docs/Web/CSS/border-color\" title=\"The border-color CSS property is a shorthand for setting the color of the four sides of an element's border: border-top-color, border-right-color, border-bottom-color, border-left-color\"><code>border-color</code></a> or <a href=\"/en-US/docs/Web/CSS/border-right\" title=\"The border-right CSS property is a shorthand that sets the values of border-right-color, border-right-style, and border-right-width. These properties describe the right border of elements.\"><code>border-right</code></a> are more convenient and preferable."},"border-right-style":{"URL":"/en-US/docs/Web/CSS/border-right-style","SUMMARY":"The <code>border-right-style</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property sets the line style of the right border of a box."},"border-right-width":{"URL":"/en-US/docs/Web/CSS/border-right-width","SUMMARY":"The <code>border-right-width</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property sets the width of the right border of a box."},"border-spacing":{"URL":"/en-US/docs/Web/CSS/border-spacing","SUMMARY":"The <code>border-spacing</code> CSS property specifies the distance between the borders of adjacent table cells (only for the <a href=\"/en/CSS/border-collapse\" title=\"en/CSS/border-collapse\">separated borders model</a>). This is equivalent to the <code>cellspacing</code> attribute in presentational HTML, but an optional second value can be used to set different horizontal and vertical spacing."},"border-style":{"URL":"/en-US/docs/Web/CSS/border-style","SUMMARY":"The <code>border-style</code> property is a shorthand property for setting the line style for all four sides of the elements border."},"border-top":{"URL":"/en-US/docs/Web/CSS/border-top","SUMMARY":"The <code>border-top</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property is a shorthand that sets the values of <a href=\"/en-US/docs/Web/CSS/border-top-color\" title=\"The border-top-color CSS property sets the color of the top border of an element. Note that in many cases the shorthand CSS properties border-color or border-top are more convenient and preferable.\"><code>border-top-color</code></a>, <a href=\"/en-US/docs/Web/CSS/border-top-style\" title=\"The border-top-style CSS property sets the line style of the top border of a box.\"><code>border-top-style</code></a>, and <a href=\"/en-US/docs/Web/CSS/border-top-width\" title=\"The border-top-width CSS property sets the width of the top border of a box.\"><code>border-top-width</code></a>. These properties describe the top border of elements."},"border-top-color":{"URL":"/en-US/docs/Web/CSS/border-top-color","SUMMARY":"The <code>border-top-color</code> CSS property sets the color of the top border of an element. Note that in many cases the shorthand CSS properties <a href=\"/en-US/docs/Web/CSS/border-color\" title=\"The border-color CSS property is a shorthand for setting the color of the four sides of an element's border: border-top-color, border-right-color, border-bottom-color, border-left-color\"><code>border-color</code></a> or <a href=\"/en-US/docs/Web/CSS/border-top\" title=\"The border-top CSS property is a shorthand that sets the values of border-top-color, border-top-style, and border-top-width. These properties describe the top border of elements.\"><code>border-top</code></a> are more convenient and preferable."},"border-top-left-radius":{"URL":"/en-US/docs/Web/CSS/border-top-left-radius","SUMMARY":"The <code>border-top-left-radius</code> CSS property sets the rounding of the top-left corner of the element. The rounding can be a circle or an ellipse, or if one of the value is <code>0,</code>no rounding is done and the corner is square."},"border-top-right-radius":{"URL":"/en-US/docs/Web/CSS/border-top-right-radius","SUMMARY":"The <code>border-top-right-radius</code> CSS property sets the rounding of the top-right corner of the element. The rounding can be a circle or an ellipse, or if one of the value is <code>0</code> no rounding is done and the corner is square."},"border-top-style":{"URL":"/en-US/docs/Web/CSS/border-top-style","SUMMARY":"The <code>border-top-style</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property sets the line style of the top border of a box."},"border-top-width":{"URL":"/en-US/docs/Web/CSS/border-top-width","SUMMARY":"The <code>border-top-width</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property sets the width of the top border of a box."},"border-width":{"URL":"/en-US/docs/Web/CSS/border-width","SUMMARY":"The <code>border-width</code> property sets the width of the border of a box. Using the shorthand property <a href=\"/en-US/docs/Web/CSS/border\" title=\"The border CSS property is a shorthand property for setting the individual border property values in a single place in the style sheet. border can be used to set the values for one or more of: border-width, border-style, border-color.\"><code>border</code></a> is often more convenient."},"bottom":{"URL":"/en-US/docs/Web/CSS/bottom","SUMMARY":"The <code>bottom</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property participates in specifying the position of <strong>positioned elements</strong>."},"box-align":{"URL":"/en-US/docs/Web/CSS/box-align","SUMMARY":"The CSS <code>box-align</code> property specifies how an element 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. See <a href=\"/en-US/docs/CSS/Flexbox\" title=\"CSS/Flexible_boxes\">Flexbox</a> for more about the properties of flexbox elements."},"box-decoration-break":{"URL":"/en-US/docs/Web/CSS/box-decoration-break","SUMMARY":"The <strong><code>box-decoration-break</code></strong> CSS property specifies how the <a href=\"/en-US/docs/Web/CSS/background\" title=\"The background CSS property is a shorthand for setting the individual background values in a single place in the style sheet. background can be used to set the values for one or more of: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.\"><code>background</code></a>, <a href=\"/en-US/docs/Web/CSS/padding\" title=\"The padding property sets the padding space on all sides of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed.\"><code>padding</code></a>, <a href=\"/en-US/docs/Web/CSS/border\" title=\"The border CSS property is a shorthand property for setting the individual border property values in a single place in the style sheet. border can be used to set the values for one or more of: border-width, border-style, border-color.\"><code>border</code></a>, <a href=\"/en-US/docs/Web/CSS/border-image\" title=\"The border-image CSS property allows drawing an image on the borders of elements. This makes drawing complex looking widgets much simpler than it has been and removes the need for nine boxes in some cases. The border-image is used instead of the border styles given by the border-style properties.\"><code>border-image</code></a>, <a href=\"/en-US/docs/Web/CSS/box-shadow\" title=\"The box-shadow property describes one or more shadow effects as a comma-separated list.\"><code>box-shadow</code></a>, <a href=\"/en-US/docs/Web/CSS/margin\" title=\"The margin CSS property sets the margin for all four sides. It is a shorthand to avoid setting each side separately with the other margin properties: margin-top, margin-right, margin-bottom and margin-left.\"><code>margin</code></a> and <a href=\"/en-US/docs/Web/CSS/clip\" title=\"The clip CSS property defines what portion of an element is visible. The clip property applies only to absolutely positioned elements, that is elements with position:absolute or position:fixed.\"><code>clip</code></a> of an element is applied when the box for the element is fragmented. Fragmentation occurs when an inline box wraps onto multiple lines, or when a block spans more than one column inside a column layout container, or spans a page break when printed. Each piece of the rendering for the element is called a fragment."},"box-direction":{"URL":"/en-US/docs/Web/CSS/box-direction","SUMMARY":"The CSS <code>box-direction</code> 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). See <a href=\"/en-US/docs/CSS/Flexbox\" title=\"CSS/Flexible_boxes\">Flexbox</a> for more about the properties of flexbox elements."},"box-flex-group":{"URL":"/en-US/docs/Web/CSS/box-flex-group","SUMMARY":"The CSS <code>box-flex-group</code> property assigns the flexbox's child elements to a flex group. See <a href=\"/en/CSS/Flexbox#box-_implementation\" title=\"/en/CSS/Flexible_boxes#box-_implementation\">Flexbox</a> for more about the properties of flexbox elements."},"box-lines":{"URL":"/en-US/docs/Web/CSS/box-lines","SUMMARY":"The CSS <strong><code>box-lines</code></strong> property determines whether the box may have a single or multiple lines (rows for horizontally oriented boxes, columns for vertically oriented boxes). See <a href=\"/en/CSS/Flexible_boxes#box-_implementation\" rel=\"internal\" title=\"/en/CSS/Flexible_boxes#box-_implementation\">Flexbox</a> for more about the properties of flexbox elements."},"box-ordinal-group":{"URL":"/en-US/docs/Web/CSS/box-ordinal-group","SUMMARY":"The CSS <code>box-ordinal-group</code> property assigns the flexbox's child elements to an ordinal group. See <a href=\"/en/CSS/Flexbox#box-_implementation\" title=\"/en/CSS/Flexible_boxes#box-_implementation\">Flexbox</a> for more about the properties of flexbox elements."},"box-orient":{"URL":"/en-US/docs/Web/CSS/box-orient","SUMMARY":"The CSS <code>box-orient</code> property specifies whether an element lays out its contents horizontally or vertically. See <a href=\"/en/CSS/Flexible_boxes#box-_implementation\" rel=\"internal\" title=\"/en/CSS/Flexible_boxes#box-_implementation\">Flexbox</a> for more about the properties of flexbox elements."},"box-shadow":{"URL":"/en-US/docs/Web/CSS/box-shadow","SUMMARY":"The <code>box-shadow</code> property describes one or more shadow effects as a comma-separated list."},"box-sizing":{"URL":"/en-US/docs/Web/CSS/box-sizing","SUMMARY":"The <code>box-sizing</code> property is used to alter the default <a href=\"/en-US/docs/CSS/Box_model\" title=\"CSS/Box_model\">CSS box model</a> used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification."},"box-suppress":{"URL":"/en-US/docs/Web/CSS/box-suppress","SUMMARY":"Technical review completed."},"break-after":{"URL":"/en-US/docs/Web/CSS/break-after","SUMMARY":"The <code>break-after</code> <a href=\"/en-US/docs/CSS\">CSS</a> property describes how the page, column or region break behavior after the generated box. If there is no generated box, the property is ignored."},"break-before":{"URL":"/en-US/docs/Web/CSS/break-before","SUMMARY":"The <code>break-before</code> <a href=\"/en-US/docs/CSS\">CSS</a> property describes how the page, column or region break behavior before the generated box. If there is no generated box, the property is ignored."},"break-inside":{"URL":"/en-US/docs/Web/CSS/break-inside","SUMMARY":"The <code>break-inside</code> <a href=\"/en-US/docs/CSS\">CSS</a> property describes how the page, column or region break inside the generated box. If there is no generated box, the property is ignored."},"calc":{"URL":"/en-US/docs/Web/CSS/calc","SUMMARY":"The <code>calc()</code> CSS function can be used anywhere a <a href=\"/en-US/docs/Web/CSS/length\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code><length></code></a>, <a href=\"/en-US/docs/Web/CSS/frequency\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code><frequency></code></a>, <a href=\"/en-US/docs/Web/CSS/angle\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code><angle></code></a>, <a href=\"/en-US/docs/Web/CSS/time\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code><time></code></a>, <a href=\"/en-US/docs/Web/CSS/number\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code><number></code></a>, or <a href=\"/en-US/docs/Web/CSS/integer\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code><integer></code></a> is required. With <code>calc()</code>, you can perform calculations to determine CSS property values."},"caption-side":{"URL":"/en-US/docs/Web/CSS/caption-side","SUMMARY":"The <code>caption-side</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property positions the content of a table's <a href=\"/en-US/docs/Web/HTML/Element/caption\" title=\"The HTML <caption> Element (or HTML Table Caption Element) represents the title of a table. Though it is always the first descendant of a <table>, its styling, using CSS, may place it elsewhere, relative to the table.\"><code><caption></code></a> on the specified side."},"clear":{"URL":"/en-US/docs/Web/CSS/clear","SUMMARY":"The <code>clear</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property specifies whether an element can be next to <a href=\"/en-US/docs/CSS/float\" title=\"CSS/float\">floating</a> elements that precede it or must be moved down (cleared) below them. The <code>clear</code> property applies to both floating and non-floating elements."},"clip":{"URL":"/en-US/docs/Web/CSS/clip","SUMMARY":"The <code>clip</code> <a href=\"/en-US/docs/Web/CSS\">CSS</a> property defines what portion of an element is visible. The <code>clip</code> property applies only to absolutely positioned elements, that is elements with <a href=\"/en-US/docs/Web/CSS/position\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>position:absolute</code></a> or <a href=\"/en-US/docs/Web/CSS/position\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>position:fixed</code></a>."},"clip-path":{"URL":"/en-US/docs/Web/CSS/clip-path","SUMMARY":"The clip-path property prevents a portion of an element from drawing by defining a clipping region. The clipping region is a path specified as an URL referencing an inline or external SVG, or shape method such as <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle\">circle()</a>. The clip-path property replaces the now deprecated <a href=\"/en-US/docs/Web/CSS/clip\">clip</a> property."},"color":{"URL":"/en-US/docs/Web/CSS/color","SUMMARY":"The <code>color</code> property sets the foreground <a href=\"/en-US/docs/Web/CSS/color_value\">color</a> of an element's text content, and its <a href=\"/en-US/docs/Web/CSS/text-decoration\">decorations</a>. It doesn't affect any other characteristic of the element; it should really be called <code>text-color</code> and would have been named so, save for historical reasons and its appearance in CSS Level 1."},"column-count":{"URL":"/en-US/docs/Web/CSS/column-count","SUMMARY":"The <code>column-count</code> CSS property describes the number of columns of the element."},"column-fill":{"URL":"/en-US/docs/Web/CSS/column-fill","SUMMARY":"The <code>column-fill</code> CSS property controls how contents are partitioned into columns. Contents are either balanced, which means that contents in all columns will have the same height or, when using <code>auto</code>, just take up the room the content needs."},"column-gap":{"URL":"/en-US/docs/Web/CSS/column-gap","SUMMARY":"The <code>column-gap</code> CSS property sets the size of the gap between columns for elements which are specified to display as a multi-column element."},"column-rule":{"URL":"/en-US/docs/Web/CSS/column-rule","SUMMARY":"In multi-column layouts, the <code>column-rule</code> CSS property specifies a straight line, or \"rule\", to be drawn between each column. It is a convenient shorthand to avoid setting each of the individual <code>column-rule-*</code> properties separately : <a href=\"/en-US/docs/Web/CSS/column-rule-width\" title=\"The column-rule-width CSS property lets you set the width of the rule drawn between columns in multi-column layouts.\"><code>column-rule-width</code></a>, <a href=\"/en-US/docs/Web/CSS/column-rule-style\" title=\"The column-rule-style CSS property lets you set the style of the rule drawn between columns in multi-column layouts.\"><code>column-rule-style</code></a> and <a href=\"/en-US/docs/Web/CSS/column-rule-color\" title=\"The column-rule-color CSS property lets you set the color of the rule drawn between columns in multi-column layouts.\"><code>column-rule-color</code></a>."},"column-rule-color":{"URL":"/en-US/docs/Web/CSS/column-rule-color","SUMMARY":"The <code>column-rule-color</code> CSS property lets you set the color of the rule drawn between columns in multi-column layouts."},"column-rule-style":{"URL":"/en-US/docs/Web/CSS/column-rule-style","SUMMARY":"The <code>column-rule-style</code> CSS property lets you set the style of the rule drawn between columns in multi-column layouts."},"column-rule-width":{"URL":"/en-US/docs/Web/CSS/column-rule-width","SUMMARY":"The <code>column-rule-width</code> CSS property lets you set the width of the rule drawn between columns in multi-column layouts."},"column-span":{"URL":"/en-US/docs/Web/CSS/column-span","SUMMARY":"The <code>column-span</code> <a href=\"/en-US/docs/CSS\" title=\"/en-US/docs/CSS\">CSS</a> property makes it possible for an element to span across all columns when its value is set to <code>all</code>. An element that spans more than one column is called a <strong>spanning element</strong>."},"column-width":{"URL":"/en-US/docs/Web/CSS/column-width","SUMMARY":"The <code>column-width</code> CSS property suggests an optimal column width. This is not a absolute value but a mere hint. Browser will adjust the width of the column around that suggested value, allowing to achieve scalable designs that fit different screen size. Especially in presence of the <a href=\"/en-US/docs/Web/CSS/column-count\" title=\"The column-count CSS property describes the number of columns of the element.\"><code>column-count</code></a> CSS property which has precedence, to set an exact column width, all length values must be specified. In horizontal text these are <a href=\"/en-US/docs/Web/CSS/width\" title=\"The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>width</code></a>, <a href=\"/en-US/docs/Web/CSS/column-width\" title=\"The column-width CSS property suggests an optimal column width. This is not a absolute value but a mere hint. Browser will adjust the width of the column around that suggested value, allowing to achieve scalable designs that fit different screen size. Especially in presence of the column-count CSS property which has precedence, to set an exact column width, all length values must be specified. In horizontal text these are width, column-width, column-gap, and column-rule-width.\"><code>column-width</code></a>, <a href=\"/en-US/docs/Web/CSS/column-gap\" title=\"The column-gap CSS property sets the size of the gap between columns for elements which are specified to display as a multi-column element.\"><code>column-gap</code></a>, and <a href=\"/en-US/docs/Web/CSS/column-rule-width\" title=\"The column-rule-width CSS property lets you set the width of the rule drawn between columns in multi-column layouts.\"><code>column-rule-width</code></a>."},"columns":{"URL":"/en-US/docs/Web/CSS/columns","SUMMARY":"The <code>columns</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property is a shorthand property allowing to set both the <a href=\"/en-US/docs/Web/CSS/column-width\" title=\"The column-width CSS property suggests an optimal column width. This is not a absolute value but a mere hint. Browser will adjust the width of the column around that suggested value, allowing to achieve scalable designs that fit different screen size. Especially in presence of the column-count CSS property which has precedence, to set an exact column width, all length values must be specified. In horizontal text these are width, column-width, column-gap, and column-rule-width.\"><code>column-width</code></a> and the <a href=\"/en-US/docs/Web/CSS/column-count\" title=\"The column-count CSS property describes the number of columns of the element.\"><code>column-count</code></a> properties at the same time."},"content":{"URL":"/en-US/docs/Web/CSS/content","SUMMARY":"The <code>content</code> CSS property is used with the <a href=\"/en-US/docs/Web/CSS/::before\" title=\"::before creates a pseudo-element that is the first child of the element matched. It is often used to add cosmetic content to an element by using the content property. This element is inline by default.\"><code>::before</code></a> and <a href=\"/en-US/docs/Web/CSS/::after\" title=\"The CSS ::after pseudo-element matches a virtual last child of the selected element. It is typically used to add cosmetic content to an element by using the content CSS property. This element is inline by default.\"><code>::after</code></a> pseudo-elements to generate content in an element. Objects inserted using the <code>content</code> property are <em>anonymous <a href=\"/en-US/docs/CSS/Replaced_element\" title=\"CSS/Replaced_element\">replaced elements</a>.</em>"},"counter-increment":{"URL":"/en-US/docs/Web/CSS/counter-increment","SUMMARY":"The <code>counter-increment</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property is used to increase the value of <a href=\"/en-US/docs/CSS_Counters\" title=\"CSS_Counters\">CSS Counters</a> by a given value. The counter's value can be reset using the <a href=\"/en-US/docs/Web/CSS/counter-reset\" title=\"The counter-reset CSS property is used to reset CSS Counters to a given value.\"><code>counter-reset</code></a> CSS property."},"counter-reset":{"URL":"/en-US/docs/Web/CSS/counter-reset","SUMMARY":"The <code>counter-reset</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property is used to reset <a href=\"/en-US/docs/CSS_Counters\" title=\"CSS_Counters\">CSS Counters</a> to a given value."},"cursor":{"URL":"/en-US/docs/Web/CSS/cursor","SUMMARY":"The <code>cursor</code> CSS property specifies the mouse cursor displayed when the mouse pointer is over an element."},"direction":{"URL":"/en-US/docs/Web/CSS/direction","SUMMARY":"Set the <code>direction</code> CSS property to match the direction of the text: <code>rtl</code> for languages written from right-to-left (like Hebrew or Arabic) text and <code>ltr</code> for other scripts. This is typically done as part of the document (e.g., using the <code>dir</code> attribute in HTML) rather than through direct use of CSS."},"display":{"URL":"/en-US/docs/Web/CSS/display","SUMMARY":"The <code>display</code> property specifies the type of rendering box used for an element. In HTML, default <code>display</code> property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is <code>inline</code>."},"display-inside":{"URL":"/en-US/docs/Web/CSS/display-inside","SUMMARY":"The <code>display-inside</code> CSS property specifies the inner display type of the box generated by an element, dictating how its contents lay out inside the box."},"display-list":{"URL":"/en-US/docs/Web/CSS/display-list","SUMMARY":"The <code>display-list</code> CSS property specifies whether a list marker should be displayed for an element."},"display-outside":{"URL":"/en-US/docs/Web/CSS/display-outside","SUMMARY":"The <code>display-outside</code> CSS property specifies the outer display type of the box generated by an element, dictating how the element participates in its parent formatting context."},"element":{"URL":"/en-US/docs/Web/CSS/element","SUMMARY":"The <code>element()</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> function defines an <a href=\"/en-US/docs/Web/CSS/image\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code><image></code></a> value generated from an arbitrary HTML element. This image is live, meaning that if the HTML element is changed, the CSS properties using the resulting value are automatically updated."},"empty-cells":{"URL":"/en-US/docs/Web/CSS/empty-cells","SUMMARY":"The <code>empty-cells</code> CSS property specifies how user agents should render borders and backgrounds around cells that have no visible content."},"filter":{"URL":"/en-US/docs/Web/CSS/filter","SUMMARY":"The <code>filter</code> property provides for effects like blurring or color shifting on an element’s rendering before the element is displayed. Filters are commonly used to adjust the rendering of an image, a background, or a border."},"flex":{"URL":"/en-US/docs/Web/CSS/flex","SUMMARY":"The <code>flex</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property is a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties\">shorthand</a> property specifying the ability of a flex item to alter its dimensions to fill available space. Flex items can be stretched to use available space proportional to their flex grow factor or their flex shrink factor to prevent overflow."},"flex-basis":{"URL":"/en-US/docs/Web/CSS/flex-basis","SUMMARY":"The <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> <code>flex-basis</code> property specifies the flex basis which is the initial <strong>main size</strong> of a flex item. <code>The property</code> determines the size of the content-box unless specified otherwise using <a href=\"/en-US/docs/Web/CSS/box-sizing\" title=\"The box-sizing property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.\"><code>box-sizing</code></a>."},"flex-direction":{"URL":"/en-US/docs/Web/CSS/flex-direction","SUMMARY":"The <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> <code>flex-direction</code> property specifies how flex items are placed in the flex container defining the main axis and the direction (normal or reversed)."},"flex-flow":{"URL":"/en-US/docs/Web/CSS/flex-flow","SUMMARY":"The <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> <code>flex-flow</code> property is a shorthand property for <code>flex-direction</code> and <code>flex-wrap</code> individual properties."},"flex-grow":{"URL":"/en-US/docs/Web/CSS/flex-grow","SUMMARY":"The <a href=\"/en/CSS\" title=\"CSS\">CSS</a> <code>flex-grow</code> property specifies the flex grow factor of a flex item."},"flex-shrink":{"URL":"/en-US/docs/Web/CSS/flex-shrink","SUMMARY":"The <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> <code>flex-shrink</code> property specifies the flex shrink factor of a flex item."},"flex-wrap":{"URL":"/en-US/docs/Web/CSS/flex-wrap","SUMMARY":"The <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> <code>flex-wrap</code> property specifies whether flex items are forced into a single line or can be wrapped onto multiple lines. If wrapping is allowed, this property also enables you to control the direction in which lines are stacked."},"float":{"URL":"/en-US/docs/Web/CSS/float","SUMMARY":"The <code>float</code> CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it."},"font":{"URL":"/en-US/docs/Web/CSS/font","SUMMARY":"The <code>font</code> CSS property is either a shorthand property for setting <a href=\"/en-US/docs/Web/CSS/font-style\" title=\"The font-style CSS property lets you select italic or oblique faces within a font-family.\"><code>font-style</code></a>, <a href=\"/en-US/docs/Web/CSS/font-variant\" title=\"The font-variant CSS property selects a normal, or small-caps face from a font family. Setting the CSS Level 2 (Revision 1) values of the  font-variant property, that is normal or small-caps, is also possible by using the font shorthand.\"><code>font-variant</code></a>, <a href=\"/en-US/docs/Web/CSS/font-weight\" title=\"The font-weight CSS property specifies the weight or boldness of the font. Some fonts are only available in normal and bold.\"><code>font-weight</code></a>, <a href=\"/en-US/docs/Web/CSS/font-size\" title=\"The font-size CSS property specifies the size of the font. Setting the font size may, in turn, change the size of other items, since it is used to compute the value of em and ex length units.\"><code>font-size</code></a>, <a href=\"/en-US/docs/Web/CSS/line-height\" title=\"On block level elements, the line-height property specifies the minimum height of line boxes within the element.\"><code>line-height</code></a> and <a href=\"/en-US/docs/Web/CSS/font-family\" title=\"The font-family CSS property lets you specify a prioritized list of font family names and/or generic family names for the selected element. Values are separated by a comma to indicate that they are alternatives. The browser will select the first font on the list that is installed on the computer or that can be downloaded using a @font-face at-rule.\"><code>font-family</code></a>, or a way to set the element's font to a system font, using specific keywords."},"font-family":{"URL":"/en-US/docs/Web/CSS/font-family","SUMMARY":"The <code>font-family</code> CSS property lets you specify a prioritized list of font family names and/or generic family names for the selected element. Values are separated by a comma to indicate that they are alternatives. The browser will select the first font on the list that is installed on the computer or that can be downloaded using a <a href=\"/en-US/docs/Web/CSS/@font-face\" title=\"The @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers. The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.\"><code>@font-face</code></a> at-rule."},"font-feature-settings":{"URL":"/en-US/docs/Web/CSS/font-feature-settings","SUMMARY":"The <code>font-feature-settings</code> CSS property gives you control over advanced typographic features in OpenType fonts."},"font-kerning":{"URL":"/en-US/docs/Web/CSS/font-kerning","SUMMARY":"The <strong><code>font-kerning</code></strong> CSS property controls the usage of the kerning information; that is, it controls how letters are spaced. The kerning information is stored in the font, and if the font is <em>well-kerned</em>, this feature allows spacing between characters to be very similar, whatever the characters are."},"font-language-override":{"URL":"/en-US/docs/Web/CSS/font-language-override","SUMMARY":"The <strong><code>font-language-override</code></strong> CSS property controls the usage of language-specific glyphs in a typeface."},"font-size":{"URL":"/en-US/docs/Web/CSS/font-size","SUMMARY":"The <code>font-size</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property specifies the size of the font. Setting the font size may, in turn, change the size of other items, since it is used to compute the value of the <code>em</code> and <code>ex</code> <br/><a href=\"/en-US/docs/Web/CSS/length\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code><length></code></a> units."},"font-size-adjust":{"URL":"/en-US/docs/Web/CSS/font-size-adjust","SUMMARY":"The <code>font-size-adjust</code> CSS property specifies that font size should be chosen based on the height of lowercase letters rather than the height of capital letters. This is useful since the legibility of fonts, especially at small sizes, is determined more by the size of lowercase letters than by the size of capital letters."},"font-smooth":{"URL":"/en-US/docs/Web/CSS/font-smooth","SUMMARY":"The <code>font-smooth</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property controls the application of anti-aliasing when fonts are rendered."},"font-stretch":{"URL":"/en-US/docs/Web/CSS/font-stretch","SUMMARY":"The <code>font-stretch</code> property selects a normal, condensed, or expanded face from a font."},"font-style":{"URL":"/en-US/docs/Web/CSS/font-style","SUMMARY":"The <code>font-style</code> CSS property lets you select <code>italic</code> or <code>oblique</code> faces within a <a href=\"/en-US/docs/Web/CSS/font-family\" title=\"The font-family CSS property lets you specify a prioritized list of font family names and/or generic family names for the selected element. Values are separated by a comma to indicate that they are alternatives. The browser will select the first font on the list that is installed on the computer or that can be downloaded using a @font-face at-rule.\"><code>font-family</code></a>."},"font-synthesis":{"URL":"/en-US/docs/Web/CSS/font-synthesis","SUMMARY":"The <strong><code>font-synthesis</code></strong> CSS property controls which missing typefaces, bold or italic, may be synthesized by the browser."},"font-variant":{"URL":"/en-US/docs/Web/CSS/font-variant","SUMMARY":"This property acts as a shorthand for the longhand properties: <a href=\"/en-US/docs/Web/CSS/font-variant-caps\" title=\"The font-variant-caps CSS property controls the usage of alternate glyphs for capital letters. Scripts can have capital letter glyphs of different sizes, the normal uppercase glyphs, small capital glyphs, and petite capital glyphs. This property controls which alternate glyphs to use.\"><code>font-variant-caps</code></a>, <a href=\"/en-US/docs/Web/CSS/font-variant-numeric\" title=\"The font-variant-numeric CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.\"><code>font-variant-numeric</code></a>, <a href=\"/en-US/docs/Web/CSS/font-variant-alternates\" title=\"The font-variant-alternates CSS property controls the usage of alternate glyphs associated to alternative names defined in @font-feature-values.\"><code>font-variant-alternates</code></a>, <a href=\"/en-US/docs/Web/CSS/font-variant-ligatures\" title=\"The font-variant-ligatures CSS property controls which ligatures and contextual forms are used in textual content of the elements it applies to. This leads to more harmonized forms in the resulting text.\"><code>font-variant-ligatures</code></a>, and <a href=\"/en-US/docs/Web/CSS/font-variant-east-asian\" title=\"The font-variant-east-asian CSS property controls the usage of alternate glyphs for East Asian scripts, like Japanese and Chinese.\"><code>font-variant-east-asian</code></a>. You can also set the CSS Level 2 (Revision 1) values of <code>font-variant</code>, (that is, <code>normal</code> or <code>small-caps</code>), by using the <a href=\"/en-US/docs/Web/CSS/font\" title=\"The font CSS property is either a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height and font-family, or a way to set the element's font to a system font, using specific keywords.\"><code>font</code></a> shorthand."},"font-variant-alternates":{"URL":"/en-US/docs/Web/CSS/font-variant-alternates","SUMMARY":"The <strong><code>font-variant-alternates</code></strong> CSS property controls the usage of alternate glyphs associated to alternative names defined in <a href=\"/en-US/docs/Web/CSS/@font-feature-values\" title=\"The @font-feature-values CSS at-rule allows authors to use a common name in font-variant-alternates for feature activated differently in OpenType. It allows to simplify the CSS when using several fonts.\"><code>@font-feature-values</code></a>."},"font-variant-caps":{"URL":"/en-US/docs/Web/CSS/font-variant-caps","SUMMARY":"The <strong><code>font-variant-caps</code></strong> CSS property controls the usage of alternate glyphs for capital letters. Scripts can have capital letter glyphs of different sizes, the normal uppercase glyphs, small capital glyphs, and petite capital glyphs. This property controls which alternate glyphs to use."},"font-variant-east-asian":{"URL":"/en-US/docs/Web/CSS/font-variant-east-asian","SUMMARY":"The <strong><code>font-variant-east-asian</code></strong> CSS property controls the usage of alternate glyphs for East Asian scripts, like Japanese and Chinese."},"font-variant-ligatures":{"URL":"/en-US/docs/Web/CSS/font-variant-ligatures","SUMMARY":"The <strong><code>font-variant-ligatures</code></strong> CSS property controls which <a class=\"glossaryLink\" href=\"/en-US/docs/Glossary/ligatures\" title=\"The definition of that term (ligatures) has not been written yet; please consider contributing it!\">ligatures</a> and <a class=\"glossaryLink\" href=\"/en-US/docs/Glossary/contextual_forms\" title=\"The definition of that term (contextual forms) has not been written yet; please consider contributing it!\">contextual forms</a> are used in textual content of the elements it applies to. This leads to more harmonized forms in the resulting text."},"font-variant-numeric":{"URL":"/en-US/docs/Web/CSS/font-variant-numeric","SUMMARY":"The <strong><code>font-variant-numeric</code></strong> CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers."},"font-variant-position":{"URL":"/en-US/docs/Web/CSS/font-variant-position","SUMMARY":"The <strong><code>font-variant-position</code></strong> CSS property controls the usage of alternate glyphs of smaller size positioned as superscript or subscript regarding the baseline of the font, which is set unchanged. These glyphs are likely to be used in <a href=\"/en-US/docs/Web/HTML/Element/sub\" title=\"The HTML Subscript Element (<sub>) defines a span of text that should be displayed, for typographic reasons, lower, and often smaller, than the main span of text.\"><code><sub></code></a> and <a href=\"/en-US/docs/Web/HTML/Element/sup\" title=\"The HTML Superscript Element (<sup>) defines a span of text that should be displayed, for typographic reasons, higher, and often smaller, than the main span of text.\"><code><sup></code></a> elements."},"font-weight":{"URL":"/en-US/docs/Web/CSS/font-weight","SUMMARY":"The <a href=\"/en-US/docs/Web/CSS/font-weight\" title=\"The font-weight CSS property specifies the weight or boldness of the font. Some fonts are only available in normal and bold.\"><code>font-weight</code></a> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property specifies the weight or boldness of the font. Some fonts are only available in <code>normal</code> and <code>bold</code>."},"frequency":{"URL":"/en-US/docs/Web/CSS/frequency","SUMMARY":"The <code><frequency></code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> data types denotes a frequency dimension, like the pitch of a speaking voice. They consists of a <span class=\"lang lang-en\"><a href=\"/en-US/docs/Web/CSS/number\" title=\"The <number> CSS data type represents a number, either integer or fractional. Its syntax extends the one of the <integer> data value. To represent a fractional value, add the fractional part — a '.' followed by one or several decimal digits — to any <integer> data value. Like for <integer> data type, there isn't any unit associated to a <number>, which is not a CSS dimension.\"><code><number></code></a></span> immediately followed by the unit. Like for any CSS dimension, there is no space between the unit literal and the number."},"height":{"URL":"/en-US/docs/Web/CSS/height","SUMMARY":"The <code>height</code> CSS property specifies the height of the content area of an element. The <a href=\"/en-US/docs/CSS/box_model#content\" title=\"CSS/Box_model#content\">content area</a> is <em>inside</em> the padding, border, and margin of the element."},"hyphens":{"URL":"/en-US/docs/Web/CSS/hyphens","SUMMARY":"The <code>hyphens</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property tells the browser how to hyphenate words when line-wrapping. You can prevent hyphenation entirely, control when the browser should hyphenate, or let the browser control when to hyphenate."},"image-orientation":{"URL":"/en-US/docs/Web/CSS/image-orientation","SUMMARY":"The <code>image-orientation</code> <a href=\"/en-US/docs/CSS\">CSS</a> property describes how to correct the default orientation of an image."},"image-rendering":{"URL":"/en-US/docs/Web/CSS/image-rendering","SUMMARY":"The <code>image-rendering</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property provides a hint to the browser about the algorithm it should use to scale images. It applies to the element itself as well as any images supplied in other properties for the element. It has no effect on non-scaled images."},"ime-mode":{"URL":"/en-US/docs/Web/CSS/ime-mode","SUMMARY":"The <code>ime-mode</code> CSS property controls the state of the input method editor for text fields."},"inherit":{"URL":"/en-US/docs/Web/CSS/inherit","SUMMARY":"The <code>inherit</code> CSS-value causes the element for which it is specified to take the <a href=\"/en-US/docs/Web/CSS/computed_value\">computed value</a> of the property from its parent element. It is allowed on every CSS property."},"inheritance":{"URL":"/en-US/docs/Web/CSS/inheritance","SUMMARY":"The summary of every <a href=\"/en-US/docs/CSS/CSS_Reference\" title=\"en/CSS_Reference\">CSS property definition</a> says whether that property is inherited by default (\"Inherited: Yes\") or not inherited by default (\"Inherited: no\"). This controls what happens when no value is specified for a property on an element."},"initial":{"URL":"/en-US/docs/Web/CSS/initial","SUMMARY":"The <code>initial</code> CSS keyword applies the initial value of a property to an element. It is allowed on every CSS property and causes the element for which it is specified to use the <a href=\"/en-US/docs/Web/CSS/initial_value\">initial value</a> of the property."},"initial value":{"URL":"/en-US/docs/Web/CSS/initial_value","SUMMARY":"The <strong>initial value</strong> given in the summary of the definition of <a href=\"/en-US/docs/CSS/CSS_Reference\" title=\"en/CSS_Reference\">each CSS property</a> has different meaning for <a href=\"/en-US/docs/CSS/inheritance\" title=\"en/CSS/inheritance\">inherited and non-inherited properties</a>."},"initial-letter":{"URL":"/en-US/docs/Web/CSS/initial-letter","SUMMARY":"The <code>initial-letter</code> CSS property specifies styling for dropped, raised, and sunken initial letters."},"initial-letter-align":{"URL":"/en-US/docs/Web/CSS/initial-letter-align","SUMMARY":"The <code>initial-letter-align</code> CSS property specifies the alignment of initial letters within a paragraph."},"inline-size":{"URL":"/en-US/docs/Web/CSS/inline-size","SUMMARY":"The <code>inline-size</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the horizontal or vertical size of an element's block depending on it's writing mode. It corresponds to the <a href=\"/en-US/docs/Web/CSS/width\" title=\"The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>width</code></a> or the <a href=\"/en-US/docs/Web/CSS/height\" title=\"The height CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>height</code></a> property depending on the value defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"CSS Writing Modes Level 3 defines CSS features to support various international script modes, such as left-to-right (e.g., Latin and Indic), right-to-left (e.g., Hebrew and Arabic), bidirectional (e.g., mixed Latin and Arabic) and vertical (e.g., Asian). This article is about the CSS writing-mode property.\"><code>writing-mode</code></a>."},"isolation":{"URL":"/en-US/docs/Web/CSS/isolation","SUMMARY":"The <code>isolation</code> CSS property defines if the element must create a new <a class=\"glossaryLink\" href=\"/en-US/docs/Glossary/stacking_context\" title=\"The definition of that term (stacking context) has not been written yet; please consider contributing it!\">stacking context</a>."},"justify-content":{"URL":"/en-US/docs/Web/CSS/justify-content","SUMMARY":"The <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> <code>justify-content</code> property defines how the browser distributes space between and around flex items along the main-axis of their container."},"left":{"URL":"/en-US/docs/Web/CSS/left","SUMMARY":"The <code>left</code> CSS property specifies part of the position of positioned elements. (NOTE: I believe this page is in error. Left also applies to 'position: relative' elements. )"},"letter-spacing":{"URL":"/en-US/docs/Web/CSS/letter-spacing","SUMMARY":"The <code>letter-spacing</code> CSS property specifies spacing behavior between text characters."},"line-height":{"URL":"/en-US/docs/Web/CSS/line-height","SUMMARY":"On block level elements, the <code>line-height</code> property specifies the minimum height of line boxes within the element."},"linear-gradient()":{"URL":"/en-US/docs/Web/CSS/linear-gradient","SUMMARY":"The CSS <code>linear-gradient()</code> function creates an <a href=\"/en-US/docs/Web/CSS/image\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code><image></code></a> which represents a linear gradient of colors. The result of this function is an object of the CSS <a href=\"/en-US/docs/Web/CSS/gradient\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code><gradient></code></a> data type. Like any other gradient, a CSS linear gradient is not a CSS <a href=\"/en-US/docs/Web/CSS/color_value\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code><color></code></a> but an image with <a href=\"/en/CSS/image#no_intrinsic\" title=\"en/CSS/image#no_intrinsic\">no intrinsic dimensions</a>; that is, it has neither natural or preferred size, nor ratio. Its concrete size will match the one of the element it applies to."},"list-style":{"URL":"/en-US/docs/Web/CSS/list-style","SUMMARY":"The <code>list-style</code> property is a shorthand property for setting <a href=\"/en-US/docs/Web/CSS/list-style-type\" title=\"The list-style-type property specifies the appearance of a list item element. As it is the only one which defaults to display:list-item, this is usually a <li> element, but can be any element with this display value.\"><code>list-style-type</code></a>, <a href=\"/en-US/docs/Web/CSS/list-style-image\" title=\"The list-style-image property specifies an image to be used as the list item marker.\"><code>list-style-image</code></a> and <a href=\"/en-US/docs/Web/CSS/list-style-position\" title=\"The list-style-position property specifies the position of the marker box in the principal block box.\"><code>list-style-position</code></a>."},"list-style-image":{"URL":"/en-US/docs/Web/CSS/list-style-image","SUMMARY":"The <code>list-style-image</code> property specifies an image to be used as the list item marker."},"list-style-position":{"URL":"/en-US/docs/Web/CSS/list-style-position","SUMMARY":"The <code>list-style-position</code> property specifies the position of the marker box in the principal block box."},"list-style-type":{"URL":"/en-US/docs/Web/CSS/list-style-type","SUMMARY":"The <code>list-style-type</code> property specifies the appearance of a list item element. Because it is the only property that defaults to <code>display:list-item</code>, this is usually a <a href=\"/en-US/docs/Web/HTML/Element/li\" title=\"The HTML List Item Element (<li>) is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.\"><code><li></code></a> element, but can be any element with this <a href=\"/en-US/docs/Web/CSS/display\" title=\"The display property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is inline.\"><code>display</code></a> value."},"margin":{"URL":"/en-US/docs/Web/CSS/margin","SUMMARY":"The <code>margin</code> CSS property sets the margin for all four sides. It is a shorthand to avoid setting each side separately with the other margin properties: <a href=\"/en-US/docs/Web/CSS/margin-top\" title=\"The margin-top CSS property of an element sets the margin space required on the top of an element. A negative value is also allowed.\"><code>margin-top</code></a>, <a href=\"/en-US/docs/Web/CSS/margin-right\" title=\"The margin-right CSS property of an element sets the margin space required on the right side of an element. A negative value is also allowed.\"><code>margin-right</code></a>, <a href=\"/en-US/docs/Web/CSS/margin-bottom\" title=\"The margin-bottom CSS property of an element sets the margin space required on the bottom of an element. A negative value is also allowed.\"><code>margin-bottom</code></a> and <a href=\"/en-US/docs/Web/CSS/margin-left\" title=\"The margin-left CSS property of an element sets the margin space required on the left side of a box associated with an element. A negative value is also allowed.\"><code>margin-left</code></a>."},"margin-block-end":{"URL":"/en-US/docs/Web/CSS/margin-block-end","SUMMARY":"The <code>margin-block-end</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the logical block end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"/en-US/docs/Web/CSS/margin-top\" title=\"The margin-top CSS property of an element sets the margin space required on the top of an element. A negative value is also allowed.\"><code>margin-top</code></a>, <a href=\"/en-US/docs/Web/CSS/margin-right\" title=\"The margin-right CSS property of an element sets the margin space required on the right side of an element. A negative value is also allowed.\"><code>margin-right</code></a>, <a href=\"/en-US/docs/Web/CSS/margin-bottom\" title=\"The margin-bottom CSS property of an element sets the margin space required on the bottom of an element. A negative value is also allowed.\"><code>margin-bottom</code></a>, or <a href=\"/en-US/docs/Web/CSS/margin-left\" title=\"The margin-left CSS property of an element sets the margin space required on the left side of a box associated with an element. A negative value is also allowed.\"><code>margin-left</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"CSS Writing Modes Level 3 defines CSS features to support various international script modes, such as left-to-right (e.g., Latin and Indic), right-to-left (e.g., Hebrew and Arabic), bidirectional (e.g., mixed Latin and Arabic) and vertical (e.g., Asian). This article is about the CSS writing-mode property.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"margin-block-start":{"URL":"/en-US/docs/Web/CSS/margin-block-start","SUMMARY":"The <code>margin-block-start</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the logical block start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"/en-US/docs/Web/CSS/margin-top\" title=\"The margin-top CSS property of an element sets the margin space required on the top of an element. A negative value is also allowed.\"><code>margin-top</code></a>, <a href=\"/en-US/docs/Web/CSS/margin-right\" title=\"The margin-right CSS property of an element sets the margin space required on the right side of an element. A negative value is also allowed.\"><code>margin-right</code></a>, <a href=\"/en-US/docs/Web/CSS/margin-bottom\" title=\"The margin-bottom CSS property of an element sets the margin space required on the bottom of an element. A negative value is also allowed.\"><code>margin-bottom</code></a>, or <a href=\"/en-US/docs/Web/CSS/margin-left\" title=\"The margin-left CSS property of an element sets the margin space required on the left side of a box associated with an element. A negative value is also allowed.\"><code>margin-left</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"CSS Writing Modes Level 3 defines CSS features to support various international script modes, such as left-to-right (e.g., Latin and Indic), right-to-left (e.g., Hebrew and Arabic), bidirectional (e.g., mixed Latin and Arabic) and vertical (e.g., Asian). This article is about the CSS writing-mode property.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"margin-bottom":{"URL":"/en-US/docs/Web/CSS/margin-bottom","SUMMARY":"The <code>margin-bottom</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property of an element sets the margin space required on the bottom of an element. A negative value is also allowed."},"margin-inline-end":{"URL":"/en-US/docs/Web/CSS/margin-inline-end","SUMMARY":"The <code>margin-inline-end</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the logical inline end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. In other words, it corresponds to the <a href=\"/en-US/docs/Web/CSS/margin-top\" title=\"The margin-top CSS property of an element sets the margin space required on the top of an element. A negative value is also allowed.\"><code>margin-top</code></a>, <a href=\"/en-US/docs/Web/CSS/margin-right\" title=\"The margin-right CSS property of an element sets the margin space required on the right side of an element. A negative value is also allowed.\"><code>margin-right</code></a>, <a href=\"/en-US/docs/Web/CSS/margin-bottom\" title=\"The margin-bottom CSS property of an element sets the margin space required on the bottom of an element. A negative value is also allowed.\"><code>margin-bottom</code></a> or <a href=\"/en-US/docs/Web/CSS/margin-left\" title=\"The margin-left CSS property of an element sets the margin space required on the left side of a box associated with an element. A negative value is also allowed.\"><code>margin-left</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"CSS Writing Modes Level 3 defines CSS features to support various international script modes, such as left-to-right (e.g., Latin and Indic), right-to-left (e.g., Hebrew and Arabic), bidirectional (e.g., mixed Latin and Arabic) and vertical (e.g., Asian). This article is about the CSS writing-mode property.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"margin-inline-start":{"URL":"/en-US/docs/Web/CSS/margin-inline-start","SUMMARY":"The <code>margin-inline-start</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the logical inline end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"/en-US/docs/Web/CSS/margin-top\" title=\"The margin-top CSS property of an element sets the margin space required on the top of an element. A negative value is also allowed.\"><code>margin-top</code></a>, <a href=\"/en-US/docs/Web/CSS/margin-right\" title=\"The margin-right CSS property of an element sets the margin space required on the right side of an element. A negative value is also allowed.\"><code>margin-right</code></a>, <a href=\"/en-US/docs/Web/CSS/margin-bottom\" title=\"The margin-bottom CSS property of an element sets the margin space required on the bottom of an element. A negative value is also allowed.\"><code>margin-bottom</code></a>, or <a href=\"/en-US/docs/Web/CSS/margin-left\" title=\"The margin-left CSS property of an element sets the margin space required on the left side of a box associated with an element. A negative value is also allowed.\"><code>margin-left</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"CSS Writing Modes Level 3 defines CSS features to support various international script modes, such as left-to-right (e.g., Latin and Indic), right-to-left (e.g., Hebrew and Arabic), bidirectional (e.g., mixed Latin and Arabic) and vertical (e.g., Asian). This article is about the CSS writing-mode property.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"margin-left":{"URL":"/en-US/docs/Web/CSS/margin-left","SUMMARY":"The <code>margin-left</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property of an element sets the margin space required on the left side of a <a href=\"/en-US/docs/CSS/box_model\" title=\"/en-US/docs/CSS/box_model\">box</a> associated with an element. A negative value is also allowed."},"margin-right":{"URL":"/en-US/docs/Web/CSS/margin-right","SUMMARY":"The <code>margin-right</code> <a href=\"mailto:[email protected]?subject=%5Berrkk%5D&body=terrreeh\" title=\"CSS\">CSS</a> property of an element sets the margin space required on the right side of an element. A negative value is also allowed."},"margin-top":{"URL":"/en-US/docs/Web/CSS/margin-top","SUMMARY":"The <code>margin-top</code> CSS property of an element sets the margin space required on the top of an element. A negative value is also allowed."},"marker-offset":{"URL":"/en-US/docs/Web/CSS/marker-offset","SUMMARY":""},"marks":{"URL":"/en-US/docs/Web/CSS/marks","SUMMARY":"The <code>marks</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property adds crop and/or cross marks to the presentation of the document. <em>Crop marks</em> indicate where the page should be cut. <em>Cross marks</em> are used to align sheets."},"mask":{"URL":"/en-US/docs/Web/CSS/mask","SUMMARY":"The mask element in CSS allows users to alter the visibility of an item by either partially or fully hidding the item. This is accomplished by either masking or clipping the image at specific points."},"mask-type":{"URL":"/en-US/docs/Web/CSS/mask-type","SUMMARY":"The CSS <code>mask-type</code> properties defines if a SVG <a href=\"/en-US/docs/Web/SVG/Element/mask\" title=\"In SVG, you can specify that any other graphics object or <g> element can be used as an alpha mask for compositing the current object into the background. A mask is defined with the mask element. A mask is used/referenced using the mask property.\"><code><mask></code></a> element is a <em>luminance</em> or an <em>alpha mask</em>."},"max-block-size":{"URL":"/en-US/docs/Web/CSS/max-block-size","SUMMARY":"The <code>max-block-size</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the horizontal or vertical maximal size of an element's block depending on its writing mode. It corresponds to the <a href=\"/en-US/docs/Web/CSS/max-width\" title=\"The max-width CSS property is used to set the maximum width of a given element. It prevents the used value of the width property from becoming larger than the value specified for max-width.\"><code>max-width</code></a> or the <a href=\"/en-US/docs/Web/CSS/max-height\" title=\"The max-height CSS property is used to set the maximum height of a given element. It prevents the used value of the height property from becoming larger than the value specified for max-height.\"><code>max-height</code></a> property, depending on the value defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"CSS Writing Modes Level 3 defines CSS features to support various international script modes, such as left-to-right (e.g., Latin and Indic), right-to-left (e.g., Hebrew and Arabic), bidirectional (e.g., mixed Latin and Arabic) and vertical (e.g., Asian). This article is about the CSS writing-mode property.\"><code>writing-mode</code></a>. If the writing mode is vertically oriented, the value of <code>max-block-size</code> relates to the maximal width of the element, otherwise it relates to the maximal height of the element. It relates to <a href=\"/en-US/docs/Web/CSS/max-inline-size\" title=\"The max-inline-size CSS property defines the horizontal or vertical maximal size of an element's block depending on it's writing mode. It corresponds to the max-width or the max-height property depending on the value defined for writing-mode.\"><code>max-inline-size</code></a>, which defines the other dimension of the element."},"max-height":{"URL":"/en-US/docs/Web/CSS/max-height","SUMMARY":"The <code>max-height</code> property is used to set the maximum height of an element. It prevents the used value of the <a href=\"/en-US/docs/Web/CSS/height\" title=\"The height CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>height</code></a> property from becoming larger than the value specified for <code>max-height</code>."},"max-inline-size":{"URL":"/en-US/docs/Web/CSS/max-inline-size","SUMMARY":"The <code>max-inline-size</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the horizontal or vertical maximal size of an element's block depending on its writing mode. It corresponds to the <a href=\"/en-US/docs/Web/CSS/max-width\" title=\"The max-width CSS property is used to set the maximum width of a given element. It prevents the used value of the width property from becoming larger than the value specified for max-width.\"><code>max-width</code></a> or the <a href=\"/en-US/docs/Web/CSS/max-height\" title=\"The max-height CSS property is used to set the maximum height of a given element. It prevents the used value of the height property from becoming larger than the value specified for max-height.\"><code>max-height</code></a> property depending on the value defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"CSS Writing Modes Level 3 defines CSS features to support various international script modes, such as left-to-right (e.g., Latin and Indic), right-to-left (e.g., Hebrew and Arabic), bidirectional (e.g., mixed Latin and Arabic) and vertical (e.g., Asian). This article is about the CSS writing-mode property.\"><code>writing-mode</code></a>. If the writing mode is vertically oriented, the value of <code>max-inline-size</code> relates to the maximal height of the element, otherwise it relates to the maximal width of the element. It relates to <a href=\"/en-US/docs/Web/CSS/max-block-size\" title=\"The max-block-size CSS property defines the horizontal or vertical maximal size of an element's block depending on it's writing mode. It corresponds to the max-width or the max-height property depending on the value defined for writing-mode.\"><code>max-block-size</code></a>, which defines the other dimension of the element."},"max-width":{"URL":"/en-US/docs/Web/CSS/max-width","SUMMARY":"The <code>max-width</code> property is used to set the maximum width of a given element. It prevents the used value of the <a href=\"/en-US/docs/Web/CSS/width\" title=\"The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>width</code></a> property from becoming larger than the value specified for <code>max-width</code>."},"min-block-size":{"URL":"/en-US/docs/Web/CSS/min-block-size","SUMMARY":"The <code>min-block-size</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the horizontal or vertical minimal size of an element's block depending on its writing mode. It corresponds to the <a href=\"/en-US/docs/Web/CSS/min-width\" title=\"The min-width CSS property is used to set the minimum width of a given element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.\"><code>min-width</code></a> or the <a href=\"/en-US/docs/Web/CSS/min-height\" title=\"The min-height CSS property is used to set the minimum height of a given element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.\"><code>min-height</code></a> property, depending on the value defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"CSS Writing Modes Level 3 defines CSS features to support various international script modes, such as left-to-right (e.g., Latin and Indic), right-to-left (e.g., Hebrew and Arabic), bidirectional (e.g., mixed Latin and Arabic) and vertical (e.g., Asian). This article is about the CSS writing-mode property.\"><code>writing-mode</code></a>. If the writing mode is vertically oriented, the value of <code>min-block-size</code> relates to the minimal width of the element, otherwise it relates to the minimal height of the element. It relates to <a href=\"/en-US/docs/Web/CSS/min-inline-size\" title=\"The min-inline-size CSS property defines the horizontal or vertical minimal size of an element's block depending on it's writing mode. It corresponds to the min-width or the min-height property depending on the value defined for writing-mode.\"><code>min-inline-size</code></a>, which defines the other dimension of the element."},"min-height":{"URL":"/en-US/docs/Web/CSS/min-height","SUMMARY":"The <code>min-height</code> property is used to set the minimum height of a given element. It prevents the used value of the <a href=\"/en-US/docs/Web/CSS/height\" title=\"The height CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>height</code></a> property from becoming smaller than the value specified for <code>min-height</code>."},"min-inline-size":{"URL":"/en-US/docs/Web/CSS/min-inline-size","SUMMARY":"The <code>min-inline-size</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the horizontal or vertical minimal size of an element's block depending on its writing mode. It corresponds to the <a href=\"/en-US/docs/Web/CSS/min-width\" title=\"The min-width CSS property is used to set the minimum width of a given element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.\"><code>min-width</code></a> or the <a href=\"/en-US/docs/Web/CSS/min-height\" title=\"The min-height CSS property is used to set the minimum height of a given element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.\"><code>min-height</code></a> property, depending on the value defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"CSS Writing Modes Level 3 defines CSS features to support various international script modes, such as left-to-right (e.g., Latin and Indic), right-to-left (e.g., Hebrew and Arabic), bidirectional (e.g., mixed Latin and Arabic) and vertical (e.g., Asian). This article is about the CSS writing-mode property.\"><code>writing-mode</code></a>. If the writing mode is vertically oriented, the value of <code>min-inline-size</code> relates to the minimal height of the element, otherwise it relates to the minimal width of the element. It relates to <a href=\"/en-US/docs/Web/CSS/min-block-size\" title=\"The min-block-size CSS property defines the horizontal or vertical minimal size of an element's block depending on it's writing mode. It corresponds to the min-width or the min-height property depending on the value defined for writing-mode.\"><code>min-block-size</code></a>, which defines the other dimension of the element."},"min-width":{"URL":"/en-US/docs/Web/CSS/min-width","SUMMARY":"The <code>min-width</code> property is used to set the minimum width of a given element. It prevents the used value of the <a href=\"/en-US/docs/Web/CSS/width\" title=\"The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.\"><code>width</code></a> property from becoming smaller than the value specified for <code>min-width</code>."},"object-fit":{"URL":"/en-US/docs/Web/CSS/object-fit","SUMMARY":"The <code>object-fit</code> CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width."},"object-position":{"URL":"/en-US/docs/Web/CSS/object-position","SUMMARY":"The <code>object-position</code> property determines the alignment of the replaced element inside its box."},"offset-block-end":{"URL":"/en-US/docs/Web/CSS/offset-block-end_clone","SUMMARY":"The <code>offset-inline-end</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the logical inline end offset of an element, which maps to a physical offset depending on the element's writing mode, directionality and text orientation. I.e. it corresponds to the <a href=\"/en-US/docs/Web/CSS/top\" title=\"The top CSS property specifies part of the position of positioned elements. It has no effect on non-positioned elements.\"><code>top</code></a>, <a href=\"/en-US/docs/Web/CSS/right\" title=\"The right CSS property specifies part of the position of positioned elements.\"><code>right</code></a>, <a href=\"/en-US/docs/Web/CSS/bottom\" title=\"The bottom CSS property participates in specifying the position of positioned elements.\"><code>bottom</code></a> or <a href=\"/en-US/docs/Web/CSS/left\" title=\"The left CSS property specifies part of the position of positioned elements.\"><code>left</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"CSS Writing Modes Level 3 defines CSS features to support various international script modes, such as left-to-right (e.g., Latin and Indic), right-to-left (e.g., Hebrew and Arabic), bidirectional (e.g., mixed Latin and Arabic) and vertical (e.g., Asian). This article is about the CSS writing-mode property.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a> and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"offset-block-start":{"URL":"/en-US/docs/Web/CSS/offset-block-start","SUMMARY":"The <code>offset-block-start</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> 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 <a href=\"/en-US/docs/Web/CSS/top\" title=\"The top CSS property specifies part of the position of positioned elements. It has no effect on non-positioned elements.\"><code>top</code></a>, <a href=\"/en-US/docs/Web/CSS/right\" title=\"The right CSS property specifies part of the position of positioned elements.\"><code>right</code></a>, <a href=\"/en-US/docs/Web/CSS/bottom\" title=\"The bottom CSS property participates in specifying the position of positioned elements.\"><code>bottom</code></a>, or <a href=\"/en-US/docs/Web/CSS/left\" title=\"The left CSS property specifies part of the position of positioned elements.\"><code>left</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"CSS Writing Modes Level 3 defines CSS features to support various international script modes, such as left-to-right (e.g., Latin and Indic), right-to-left (e.g., Hebrew and Arabic), bidirectional (e.g., mixed Latin and Arabic) and vertical (e.g., Asian). This article is about the CSS writing-mode property.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"offset-inline-end":{"URL":"/en-US/docs/Web/CSS/offset-inline-end","SUMMARY":"The <code>offset-inline-end</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the logical inline 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 <a href=\"/en-US/docs/Web/CSS/top\" title=\"The top CSS property specifies part of the position of positioned elements. It has no effect on non-positioned elements.\"><code>top</code></a>, <a href=\"/en-US/docs/Web/CSS/right\" title=\"The right CSS property specifies part of the position of positioned elements.\"><code>right</code></a>, <a href=\"/en-US/docs/Web/CSS/bottom\" title=\"The bottom CSS property participates in specifying the position of positioned elements.\"><code>bottom</code></a>, or <a href=\"/en-US/docs/Web/CSS/left\" title=\"The left CSS property specifies part of the position of positioned elements.\"><code>left</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"CSS Writing Modes Level 3 defines CSS features to support various international script modes, such as left-to-right (e.g., Latin and Indic), right-to-left (e.g., Hebrew and Arabic), bidirectional (e.g., mixed Latin and Arabic) and vertical (e.g., Asian). This article is about the CSS writing-mode property.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"offset-inline-start":{"URL":"/en-US/docs/Web/CSS/offset-inline-start","SUMMARY":"The <code>offset-inline-start</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the logical inline 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 <a href=\"/en-US/docs/Web/CSS/top\" title=\"The top CSS property specifies part of the position of positioned elements. It has no effect on non-positioned elements.\"><code>top</code></a>, <a href=\"/en-US/docs/Web/CSS/right\" title=\"The right CSS property specifies part of the position of positioned elements.\"><code>right</code></a>, <a href=\"/en-US/docs/Web/CSS/bottom\" title=\"The bottom CSS property participates in specifying the position of positioned elements.\"><code>bottom</code></a>, or <a href=\"/en-US/docs/Web/CSS/left\" title=\"The left CSS property specifies part of the position of positioned elements.\"><code>left</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"CSS Writing Modes Level 3 defines CSS features to support various international script modes, such as left-to-right (e.g., Latin and Indic), right-to-left (e.g., Hebrew and Arabic), bidirectional (e.g., mixed Latin and Arabic) and vertical (e.g., Asian). This article is about the CSS writing-mode property.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"opacity":{"URL":"/en-US/docs/Web/CSS/opacity","SUMMARY":"The <code>opacity</code> CSS property specifies the transparency of an element, that is, the degree to which the background behind the element is overlaid."},"order":{"URL":"/en-US/docs/Web/CSS/order","SUMMARY":"The <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> <code>order</code> property specifies the order used to lay out flex items in their flex container. Elements are laid out by ascending order of the <code>order</code> value. Elements with the same <code>order</code> value are laid out in the order they appear in the source code."},"orphans":{"URL":"/en-US/docs/Web/CSS/orphans","SUMMARY":"The <code>orphans</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property refers to the <em>minimum</em> number of lines in a block container that must be left at the bottom of the page. This property is normally used to control how page breaks occur."},"outline":{"URL":"/en-US/docs/Web/CSS/outline","SUMMARY":"The <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> <code>outline</code> property is a shorthand property for setting one or more of the individual outline properties <a href=\"/en-US/docs/Web/CSS/outline-style\" title=\"The outline-style CSS property is used to set the style of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.\"><code>outline-style</code></a>, <a href=\"/en-US/docs/Web/CSS/outline-width\" title=\"The outline-width CSS property is used to set the width of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out:\"><code>outline-width</code></a> and <a href=\"/en-US/docs/Web/CSS/outline-color\" title=\"The outline-color CSS property sets the color of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.\"><code>outline-color</code></a> in a single declaration. In most cases the use of this shortcut is preferable and more convenient."},"outline-color":{"URL":"/en-US/docs/Web/CSS/outline-color","SUMMARY":"The <code>outline-color</code> CSS property sets the color of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out."},"outline-offset":{"URL":"/en-US/docs/Web/CSS/outline-offset","SUMMARY":"The <code>outline-offset</code> CSS property is used to set space between an <a href=\"/en-US/docs/Web/CSS/outline\" title=\"The CSS outline property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single declaration. In most cases the use of this shortcut is preferable and more convenient.\"><code>outline</code></a> and the edge or border of an element. An outline is a line that is drawn around elements, outside the border edge."},"outline-style":{"URL":"/en-US/docs/Web/CSS/outline-style","SUMMARY":"The <code>outline-style</code> CSS property is used to set the style of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out."},"outline-width":{"URL":"/en-US/docs/Web/CSS/outline-width","SUMMARY":"The <code>outline-width</code> CSS property is used to set the width of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out:"},"overflow":{"URL":"/en-US/docs/Web/CSS/overflow","SUMMARY":"The <code>overflow</code> property specifies whether to clip content, render scrollbars or just display content when it overflows its block level container."},"overflow-x":{"URL":"/en-US/docs/Web/CSS/overflow-x","SUMMARY":"The <code>overflow-x</code> property specifies whether to clip content, render a scroll bar, or display overflow content of a block-level element, when it overflows at the left and right edges."},"overflow-y":{"URL":"/en-US/docs/Web/CSS/overflow-y","SUMMARY":"The <code>overflow-y</code> property specifies whether to clip content, render a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges."},"padding":{"URL":"/en-US/docs/Web/CSS/padding","SUMMARY":"The <code>padding</code> property sets the padding space on all sides of an element. The <a href=\"/en/CSS/box_model#padding\" title=\"http://developer.mozilla.org/en/CSS/Box_model#padding\">padding area</a> is the space between the content of the element and its border. Negative values are not allowed."},"padding-block-end":{"URL":"/en-US/docs/Web/CSS/padding-block-end","SUMMARY":"The <code>padding-block-end</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the logical block end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"/en-US/docs/Web/CSS/padding-top\" title=\"The padding-top CSS property of an element sets the padding space required on the top of an element. The padding area is the space between the content of the element and its border. Contrary to margin-top values, negative values of padding-top are invalid.\"><code>padding-top</code></a>, <a href=\"/en-US/docs/Web/CSS/padding-right\" title=\"The padding-right CSS property of an element sets the padding space required on the right side of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed.\"><code>padding-right</code></a>, <a href=\"/en-US/docs/Web/CSS/padding-bottom\" title=\"The padding-bottom CSS property of an element sets the height of the padding area at the bottom of an element. The padding area is the space between the content of the element and it's border. Contrary to margin-bottom values, negative values of padding-bottom are invalid.\"><code>padding-bottom</code></a>, or <a href=\"/en-US/docs/Web/CSS/padding-left\" title=\"The padding-left CSS property of an element sets the padding space required on the left side of an element. The padding area is the space between the content of the element and it's border. A negative value is not allowed.\"><code>padding-left</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"CSS Writing Modes Level 3 defines CSS features to support various international script modes, such as left-to-right (e.g., Latin and Indic), right-to-left (e.g., Hebrew and Arabic), bidirectional (e.g., mixed Latin and Arabic) and vertical (e.g., Asian). This article is about the CSS writing-mode property.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"padding-block-start":{"URL":"/en-US/docs/Web/CSS/padding-block-start","SUMMARY":"The <code>padding-block-start</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the logical block start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"/en-US/docs/Web/CSS/padding-top\" title=\"The padding-top CSS property of an element sets the padding space required on the top of an element. The padding area is the space between the content of the element and its border. Contrary to margin-top values, negative values of padding-top are invalid.\"><code>padding-top</code></a>, <a href=\"/en-US/docs/Web/CSS/padding-right\" title=\"The padding-right CSS property of an element sets the padding space required on the right side of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed.\"><code>padding-right</code></a>, <a href=\"/en-US/docs/Web/CSS/padding-bottom\" title=\"The padding-bottom CSS property of an element sets the height of the padding area at the bottom of an element. The padding area is the space between the content of the element and it's border. Contrary to margin-bottom values, negative values of padding-bottom are invalid.\"><code>padding-bottom</code></a>, or <a href=\"/en-US/docs/Web/CSS/padding-left\" title=\"The padding-left CSS property of an element sets the padding space required on the left side of an element. The padding area is the space between the content of the element and it's border. A negative value is not allowed.\"><code>padding-left</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"CSS Writing Modes Level 3 defines CSS features to support various international script modes, such as left-to-right (e.g., Latin and Indic), right-to-left (e.g., Hebrew and Arabic), bidirectional (e.g., mixed Latin and Arabic) and vertical (e.g., Asian). This article is about the CSS writing-mode property.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"padding-bottom":{"URL":"/en-US/docs/Web/CSS/padding-bottom","SUMMARY":"The <code>padding-bottom</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property of an element sets the height of the padding area at the bottom of an element. The <a href=\"/en/CSS/box_model#padding\" title=\"http://developer.mozilla.org/en/CSS/Box_model#padding\">padding area</a> is the space between the content of the element and it's border. Contrary to <a href=\"/en-US/docs/Web/CSS/margin-bottom\" title=\"\"><code>margin-bottom</code></a> values, negative values of <code>padding-bottom</code> are invalid."},"padding-inline-end":{"URL":"/en-US/docs/Web/CSS/padding-inline-end","SUMMARY":"The <code>padding-inline-end</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the logical inline end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"/en-US/docs/Web/CSS/padding-top\" title=\"The padding-top CSS property of an element sets the padding space required on the top of an element. The padding area is the space between the content of the element and its border. Contrary to margin-top values, negative values of padding-top are invalid.\"><code>padding-top</code></a>, <a href=\"/en-US/docs/Web/CSS/padding-right\" title=\"The padding-right CSS property of an element sets the padding space required on the right side of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed.\"><code>padding-right</code></a>, <a href=\"/en-US/docs/Web/CSS/padding-bottom\" title=\"The padding-bottom CSS property of an element sets the height of the padding area at the bottom of an element. The padding area is the space between the content of the element and it's border. Contrary to margin-bottom values, negative values of padding-bottom are invalid.\"><code>padding-bottom</code></a>, or <a href=\"/en-US/docs/Web/CSS/padding-left\" title=\"The padding-left CSS property of an element sets the padding space required on the left side of an element. The padding area is the space between the content of the element and it's border. A negative value is not allowed.\"><code>padding-left</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"CSS Writing Modes Level 3 defines CSS features to support various international script modes, such as left-to-right (e.g., Latin and Indic), right-to-left (e.g., Hebrew and Arabic), bidirectional (e.g., mixed Latin and Arabic) and vertical (e.g., Asian). This article is about the CSS writing-mode property.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"padding-inline-start":{"URL":"/en-US/docs/Web/CSS/padding-inline-start","SUMMARY":"The <code>padding-inline-start</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the logical inline start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. It corresponds to the <a href=\"/en-US/docs/Web/CSS/padding-top\" title=\"The padding-top CSS property of an element sets the padding space required on the top of an element. The padding area is the space between the content of the element and its border. Contrary to margin-top values, negative values of padding-top are invalid.\"><code>padding-top</code></a>, <a href=\"/en-US/docs/Web/CSS/padding-right\" title=\"The padding-right CSS property of an element sets the padding space required on the right side of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed.\"><code>padding-right</code></a>, <a href=\"/en-US/docs/Web/CSS/padding-bottom\" title=\"The padding-bottom CSS property of an element sets the height of the padding area at the bottom of an element. The padding area is the space between the content of the element and it's border. Contrary to margin-bottom values, negative values of padding-bottom are invalid.\"><code>padding-bottom</code></a>, or <a href=\"/en-US/docs/Web/CSS/padding-left\" title=\"The padding-left CSS property of an element sets the padding space required on the left side of an element. The padding area is the space between the content of the element and it's border. A negative value is not allowed.\"><code>padding-left</code></a> property depending on the values defined for <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"CSS Writing Modes Level 3 defines CSS features to support various international script modes, such as left-to-right (e.g., Latin and Indic), right-to-left (e.g., Hebrew and Arabic), bidirectional (e.g., mixed Latin and Arabic) and vertical (e.g., Asian). This article is about the CSS writing-mode property.\"><code>writing-mode</code></a>, <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a>, and <a href=\"/en-US/docs/Web/CSS/text-orientation\" title=\"The text-orientation CSS property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when writing-mode is not horizontal-tb. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers.\"><code>text-orientation</code></a>."},"padding-left":{"URL":"/en-US/docs/Web/CSS/padding-left","SUMMARY":"The <code>padding-left</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property of an element sets the padding space required on the left side of an element. The <a href=\"/en/CSS/box_model#padding\" title=\"http://developer.mozilla.org/en/CSS/Box_model#padding\">padding area</a> is the space between the content of the element and it's border. A negative value is not allowed."},"padding-right":{"URL":"/en-US/docs/Web/CSS/padding-right","SUMMARY":"The <code>padding-right</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property of an element sets the padding space required on the right side of an element. The <a href=\"/en/CSS/box_model#padding\" title=\"http://developer.mozilla.org/en/CSS/Box_model#padding\">padding area</a> is the space between the content of the element and its border. Negative values are not allowed."},"padding-top":{"URL":"/en-US/docs/Web/CSS/padding-top","SUMMARY":"The <code>padding-top</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property of an element sets the padding space required on the top of an element. The <a href=\"/en/CSS/box_model#padding\" title=\"http://developer.mozilla.org/en/CSS/Box_model#padding\">padding area</a> is the space between the content of the element and its border. Contrary to <a href=\"/en-US/docs/Web/CSS/margin-top\" title=\"\"><code>margin-top</code></a> values, negative values of <code>padding-top</code> are invalid."},"page-break-after":{"URL":"/en-US/docs/Web/CSS/page-break-after","SUMMARY":"The <code>page-break-after</code> CSS property adjusts page breaks <em>after</em> the current element."},"page-break-before":{"URL":"/en-US/docs/Web/CSS/page-break-before","SUMMARY":"The <code>page-break-before</code> CSS property adjusts page breaks <em>before</em> the current element."},"page-break-inside":{"URL":"/en-US/docs/Web/CSS/page-break-inside","SUMMARY":"The <code>page-break-inside</code> CSS property adjusts page breaks <em>inside</em> the current element."},"perspective":{"URL":"/en-US/docs/Web/CSS/perspective","SUMMARY":"The <code>perspective</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property determines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property."},"perspective-origin":{"URL":"/en-US/docs/Web/CSS/perspective-origin","SUMMARY":"The <code>perspective-origin</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property determines the position the viewer is looking at. It is used as the <em>vanishing point</em> by the <a href=\"/en-US/docs/Web/CSS/perspective\" title=\"\"><code>perspective</code></a> property."},"pointer-events":{"URL":"/en-US/docs/Web/CSS/pointer-events","SUMMARY":"The CSS property <code>pointer-events</code> allows authors to control under what circumstances (if any) a particular graphic element can become the <a href=\"/en-US/docs/Web/API/event.target\">target</a> of mouse events. When this property is unspecified, the same characteristics of the <code>visiblePainted</code> value apply to SVG content."},"position":{"URL":"/en-US/docs/Web/CSS/position","SUMMARY":"The <code>position</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property chooses alternative rules for positioning elements, designed to be useful for scripted animation effects."},"quotes":{"URL":"/en-US/docs/Web/CSS/quotes","SUMMARY":"The <code>quotes</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property indicates how user agents should render quotation marks."},"radial-gradient()":{"URL":"/en-US/docs/Web/CSS/radial-gradient","SUMMARY":"The CSS <code>radial-gradient()</code>function creates an <a href=\"/en-US/docs/Web/CSS/image\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code><image></code></a> which represents a gradient of colors radiating from an origin, the <em>center</em> of the gradient. The result of this function is an object of the CSS <a href=\"/en-US/docs/Web/CSS/gradient\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code><gradient></code></a> data type."},"repeating-linear-gradient()":{"URL":"/en-US/docs/Web/CSS/repeating-linear-gradient","SUMMARY":"The CSS <code>repeating-linear-gradient</code> function creates an <a href=\"/en-US/docs/Web/CSS/image\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code><image></code></a> of a repeating gradients. It works similarly, and takes the same arguments, to the basic linear gradients, as described by <a href=\"/en-US/docs/Web/CSS/linear-gradient\" title=\"{{ CSSRef() }}\"><code>linear-gradient()</code></a>, but it automatically repeats the color stops infinitely in both directions, with their positions shifted by multiples of the length of a basic linear gradient (the difference between the last color stop's position and the first one's position)."},"repeating-radial-gradient()":{"URL":"/en-US/docs/Web/CSS/repeating-radial-gradient","SUMMARY":"This works similarly to the standard radial gradients as described by <a href=\"/en-US/docs/Web/CSS/radial-gradient\" title=\"The CSS radial-gradient()function creates an <image> which represents a gradient of colors radiating from an origin, the center of the gradient. The result of this function is an object of the CSS <gradient> data type.\"><code>radial-gradient()</code></a>, but it automatically repeats the color stops infinitely in both directions, with their positions shifted by multiples of the difference between the last color stop's position and the first one's position."},"resize":{"URL":"/en-US/docs/Web/CSS/resize","SUMMARY":"The <code>resize</code> CSS property lets you control the resizability of an element."},"right":{"URL":"/en-US/docs/Web/CSS/right","SUMMARY":"The <code>right</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property specifies part of the position of positioned elements."},"ruby-align":{"URL":"/en-US/docs/Web/CSS/ruby-align","SUMMARY":"The <code><strong>ruby-align</strong></code> CSS property defines the distribution of the different ruby elements over the base."},"ruby-position":{"URL":"/en-US/docs/Web/CSS/ruby-position","SUMMARY":"The <code><strong>ruby-position</strong></code> CSS property defines the position of a ruby element relatives to its base element. It can be position over the element (<code>over</code>), under it (<code>under</code>), or between the characters, on their right side (<code>inter-character</code>)."},"scroll-behavior":{"URL":"/en-US/docs/Web/CSS/scroll-behavior","SUMMARY":"The <code>scroll-behavior</code> CSS property specifies the scrolling behavior for a scrolling box, when scrolling happens due to navigation or CSSOM scrolling APIs. Any other scrolls, e.g. those that are performed by the user, are not affected by this property. When this property is specified on the root element, it applies to the viewport instead."},"scroll-snap-coordinate":{"URL":"/en-US/docs/Web/CSS/scroll-snap-coordinate","SUMMARY":"The <code>scroll-snap-coordinate</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the positions in x and y coordinates within the element which will align with the nearest ancestor scroll container's <a href=\"/en-US/docs/Web/CSS/scroll-snap-destination\" title=\"The scroll-snap-destination CSS property defines the position in x and y coordinates within the scroll container's visual viewport which element snap points align with.\"><code>scroll-snap-destination</code></a> for the respective axis."},"scroll-snap-destination":{"URL":"/en-US/docs/Web/CSS/scroll-snap-destination","SUMMARY":"The <code>scroll-snap-destination</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the position in x and y coordinates within the scroll container's visual <a class=\"glossaryLink\" href=\"/en-US/docs/Glossary/viewport\" title=\"viewport: A viewport represents a polygonal (normally rectangular) area in computer graphics currently being viewed.\">viewport</a> which element snap points align with."},"scroll-snap-points-x":{"URL":"/en-US/docs/Web/CSS/scroll-snap-points-x","SUMMARY":"The <code>scroll-snap-points-x</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the horizontal positioning of snap points within the content of the scroll container they are applied to."},"scroll-snap-points-y":{"URL":"/en-US/docs/Web/CSS/scroll-snap-points-y","SUMMARY":"The <code>scroll-snap-points-y</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines the vertical positioning of snap points within the content of the scroll container they are applied to."},"scroll-snap-type":{"URL":"/en-US/docs/Web/CSS/scroll-snap-type","SUMMARY":"The <code>scroll-snap-type</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines how strictly snap points are enforced on the scroll container in case there is one."},"scroll-snap-type-x":{"URL":"/en-US/docs/Web/CSS/scroll-snap-type-x","SUMMARY":"The <code>scroll-snap-type-x</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines how strictly snap points are enforced on the horizontal axis of the scroll container in case there is one."},"scroll-snap-type-y":{"URL":"/en-US/docs/Web/CSS/scroll-snap-type-y","SUMMARY":"The <code>scroll-snap-type-y</code> <a href=\"/en-US/docs/Web/CSS\" title=\"CSS\">CSS</a> property defines how strictly snap points are enforced on the vertical axis of the scroll container in case there is one."},"shape-image-threshold":{"URL":"/en-US/docs/Web/CSS/shape-image-threshold","SUMMARY":"The <code>shape-image-threshold</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property defines the alpha channel threshold used to extract the shape using an image as the value for <a href=\"/en-US/docs/\"><code>shape-outside</code></a>. A value of 0.5 means that the shape will enclose all the pixels that are more than 50% opaque."},"shape-margin":{"URL":"/en-US/docs/Web/CSS/shape-margin","SUMMARY":"The <code>shape-margin</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property adds a margin to <code><a href=\"/en-US/docs/Web/CSS/shape-outside\">shape-outside</a>.</code>"},"specified value":{"URL":"/en-US/docs/Web/CSS/specified_value","SUMMARY":"The <strong>specified value</strong> of a CSS property is set in one out of three ways."},"symbols()":{"URL":"/en-US/docs/Web/CSS/symbols","SUMMARY":"The <code>symbols()</code> function allows counter styles to be defined inline, directly as the value of the CSS property. Unlike styles defines with <a href=\"/en-US/docs/Web/CSS/@counter-style\" title=\"The @counter-style CSS at-rule defines a specific counter style that are not part of the predefined set of styles. A @counter-style rule defines how to convert a counter value into a string representation.\"><code>@counter-style</code></a>, these styles are anonymous. The <code>symbols()</code> function doesn't have all the capabilities and options of the <a href=\"/en-US/docs/Web/CSS/@counter-style\" title=\"The @counter-style CSS at-rule defines a specific counter style that are not part of the predefined set of styles. A @counter-style rule defines how to convert a counter value into a string representation.\"><code>@counter-style</code></a> at-rule, but is useful in cases such as when the style is used only once and you don't need all the the options provided by <a href=\"/en-US/docs/Web/CSS/@counter-style\" title=\"The @counter-style CSS at-rule defines a specific counter style that are not part of the predefined set of styles. A @counter-style rule defines how to convert a counter value into a string representation.\"><code>@counter-style</code></a>."},"tab-size":{"URL":"/en-US/docs/Web/CSS/tab-size","SUMMARY":"The <code>tab-size</code> CSS property is used to customize the width of a tab (<code>U+0009</code>) character."},"table-layout":{"URL":"/en-US/docs/Web/CSS/table-layout","SUMMARY":"The <code>table-layout</code> CSS property defines the algorithm to be used to layout the table cells, rows, and columns."},"text-align":{"URL":"/en-US/docs/Web/CSS/text-align","SUMMARY":"The <code>text-align</code> CSS property describes how inline content like text is aligned in its parent block element. <code>text-align</code> does not control the alignment of block elements itself, only their inline content."},"text-align-last":{"URL":"/en-US/docs/Web/CSS/text-align-last","SUMMARY":"The <code>text-align-last</code> CSS property describes how the last line of a block or a line, right before a forced line break, is aligned."},"text-decoration":{"URL":"/en-US/docs/Web/CSS/text-decoration","SUMMARY":"The <code>text-decoration</code> CSS property is used to set the text formatting to <code>underline</code>, <code>overline</code>, <code>line-through</code> or <code>blink</code>. Underline and overline decorations are positioned under the text, line-through over it."},"text-decoration-color":{"URL":"/en-US/docs/Web/CSS/text-decoration-color","SUMMARY":"The <code>text-decoration-color</code> CSS property sets the color used when drawing underlines, overlines, or strike-throughs specified by <a href=\"/en-US/docs/Web/CSS/text-decoration-line\" title=\"The text-decoration-line CSS property sets what kind of line decorations are added to an element.\"><code>text-decoration-line</code></a>."},"text-decoration-line":{"URL":"/en-US/docs/Web/CSS/text-decoration-line","SUMMARY":"The <code>text-decoration-line</code> CSS property sets what kind of line decorations are added to an element."},"text-decoration-style":{"URL":"/en-US/docs/Web/CSS/text-decoration-style","SUMMARY":"The <code>text-decoration-style</code> CSS property defines the style of the lines specified by <a href=\"/en-US/docs/Web/CSS/text-decoration-line\" title=\"The text-decoration-line CSS property sets what kind of line decorations are added to an element.\"><code>text-decoration-line</code></a>. The style applies to all lines, there is no way to define different style for each of the line defined by <code>text-decoration-line</code>."},"text-indent":{"URL":"/en-US/docs/Web/CSS/text-indent","SUMMARY":"The <code>text-indent</code> property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element."},"text-orientation":{"URL":"/en-US/docs/Web/CSS/text-orientation","SUMMARY":"The <code>text-orientation</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property defines the orientation of the text in a line. This property only has an effect in vertical mode, that is when <a href=\"/en-US/docs/Web/CSS/writing-mode\" title=\"The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.\"><code>writing-mode</code></a> is not <code>horizontal-tb</code>. It is useful to control the display of writing in languages using vertical script, but also to deal with vertical table headers."},"text-overflow":{"URL":"/en-US/docs/Web/CSS/text-overflow","SUMMARY":"The <code>text-overflow</code> property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis ('<code>…</code>', <code style=\"text-transform: uppercase;\">U+2026 Horizontal Ellipsis</code>), or display a custom string."},"text-rendering":{"URL":"/en-US/docs/Web/CSS/text-rendering","SUMMARY":"The <code>text-rendering</code> CSS property provides information to the rendering engine about what to optimize for when rendering text."},"text-shadow":{"URL":"/en-US/docs/Web/CSS/text-shadow","SUMMARY":"The <code>text-shadow</code> property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and <a href=\"/en-US/docs/Web/CSS/text-decoration\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>text-decorations</code></a> of the element."},"text-size-adjust":{"URL":"/en-US/docs/Web/CSS/text-size-adjust","SUMMARY":"On mobile devices, the <code>text-size-adjust</code> property allows Web authors to control if and how the text-inflating algorithm is applied to the textual content of the element it is applied to."},"text-transform":{"URL":"/en-US/docs/Web/CSS/text-transform","SUMMARY":"The <code>text-transform</code> CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized."},"text-underline-position":{"URL":"/en-US/docs/Web/CSS/text-underline-position","SUMMARY":"The <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> <code>text-underline-position</code> property specifies the position of the underline which is set using the <a href=\"/en-US/docs/Web/CSS/text-decoration\" title=\"The text-decoration CSS property is used to set the text formatting to underline, overline, line-through or blink.\"><code>text-decoration</code></a> property <code>underline</code> value."},"top":{"URL":"/en-US/docs/Web/CSS/top","SUMMARY":"The <code>top</code> CSS property specifies part of the position of positioned elements. It has no effect on non-positioned elements."},"touch-action":{"URL":"/en-US/docs/Web/CSS/touch-action","SUMMARY":"The <code>touch-action</code> CSS property specifies whether and how a given region can be manipulated by the user (for instance, by panning or zooming)."},"transform":{"URL":"/en-US/docs/Web/CSS/transform","SUMMARY":"The CSS <code>transform</code> property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed."},"transform-function":{"URL":"/en-US/docs/Web/CSS/transform-function","SUMMARY":"The <code><transform-function></code> CSS data type denotes a function to apply to an element's representation in order to modify it. Usually such transform may be expressed by matrices and the resulting images can be determined using matrix multiplication on each point."},"transform-origin":{"URL":"/en-US/docs/Web/CSS/transform-origin","SUMMARY":"The <code>transform-origin</code> property lets you modify the origin for transformations of an element. For example, the transform-origin of the <code>rotate()</code> function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)"},"transform-style":{"URL":"/en-US/docs/Web/CSS/transform-style","SUMMARY":"The <code>transform-style</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property determines if the children of the element are positioned in the 3D-space or are flattened in the plane of the element."},"transition":{"URL":"/en-US/docs/Web/CSS/transition","SUMMARY":"The <a href=\"/en/CSS\" title=\"CSS\">CSS</a> <code>transition</code> property is a <a href=\"/en-US/docs/CSS/Shorthand_properties\" title=\"/en-US/docs/CSS/Shorthand_properties\">shorthand property</a> for <a href=\"/en-US/docs/Web/CSS/transition-property\" title=\"The transition-property CSS property is used to specify the names of CSS properties to which a transition effect should be applied.\"><code>transition-property</code></a>, <a href=\"/en-US/docs/Web/CSS/transition-duration\" title=\"The transition-duration CSS property specifies the number of seconds or milliseconds a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.\"><code>transition-duration</code></a>, <a href=\"/en-US/docs/Web/CSS/transition-timing-function\" title=\"The transition-timing-function property is used to describe how the intermediate values of the CSS properties being affected by a transition effect are calculated. This in essence lets you establish an acceleration curve, so that the speed of the transition can vary over its duration.\"><code>transition-timing-function</code></a>, and <a href=\"/en-US/docs/Web/CSS/transition-delay\" title=\"The transition-delay property specifies the amount of time to wait between a change being requested to a property that is to be transitioned and the start of the transition effect.\"><code>transition-delay</code></a>. It enables you to define the transition between two states of an element. Different states may be defined using <a href=\"/en-US/docs/CSS/Pseudo-classes\" title=\"/en-US/docs/CSS/Pseudo-classes\">pseudo-classes</a> like <a href=\"/en-US/docs/Web/CSS/:hover\" title=\"The :hover CSS pseudo-class matches when the user designates an element with a pointing device, but does not necessarily activate it. This style may be overridden by any other link-related pseudo-classes, that is :link, :visited, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :hover rule after the :link and :visited rules but before the :active one, as defined by the LVHA-order: :link — :visited — :hover — :active.\"><code>:hover</code></a> or <a href=\"/en-US/docs/Web/CSS/:active\" title=\"The :active CSS pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. When interacting with a mouse, this is typically the time between the user presses the mouse button and releases it. The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on <a> and <button> HTML elements, but may not be limited to just those.\"><code>:active</code></a> or dynamically set using JavaScript."},"transition-delay":{"URL":"/en-US/docs/Web/CSS/transition-delay","SUMMARY":"The <code>transition-delay</code> property specifies the amount of time to wait between a change being requested to a property that is to be transitioned and the start of the <a href=\"/en/CSS/CSS_transitions\" title=\"en/CSS/CSS transitions\">transition effect</a>."},"transition-duration":{"URL":"/en-US/docs/Web/CSS/transition-duration","SUMMARY":"The <code>transition-duration</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property specifies the number of seconds or milliseconds a transition animation should take to complete. By default, the value is <code>0s</code>, meaning that no animation will occur."},"transition-property":{"URL":"/en-US/docs/Web/CSS/transition-property","SUMMARY":"The <code>transition-property</code> CSS property is used to specify the names of CSS properties to which a <a href=\"/en-US/docs/Web/Guide/CSS/Using_CSS_transitions\">transition effect</a> should be applied."},"transition-timing-function":{"URL":"/en-US/docs/Web/CSS/transition-timing-function","SUMMARY":"The <code>transition-timing-function</code> property is used to describe how the intermediate values of the CSS properties being affected by a <a href=\"/en-US/docs/CSS/Tutorials/Using_CSS_transitions\" title=\"en/CSS/CSS transitions\">transition effect</a> are calculated. This in essence lets you establish an acceleration curve, so that the speed of the transition can vary over its duration."},"translation-value":{"URL":"/en-US/docs/Web/CSS/translation-value","SUMMARY":"Technical review completed."},"unicode-bidi":{"URL":"/en-US/docs/Web/CSS/unicode-bidi","SUMMARY":"The <code>unicode-bidi</code> <a href=\"/en/CSS\" title=\"CSS\">CSS</a> property together with the <a href=\"/en-US/docs/Web/CSS/direction\" title=\"Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.\"><code>direction</code></a> property relates to the handling of bidirectional text in a document. For example, if a block of text contains both left-to-right and right-to-left text then the user-agent uses a complex Unicode algorithm to decide how to display the text. This property overrides this algorithm and allows the developer to control the text embedding."},"unicode-range":{"URL":"/en-US/docs/Web/CSS/unicode-range","SUMMARY":"The <code>unicode-range</code> CSS descriptor sets the specific range of characters to be downloaded from a font defined by <a href=\"/en-US/docs/Web/CSS/@font-face\" title=\"The @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers. The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.\"><code>@font-face</code></a> and made available for use on the current page."},"unset":{"URL":"/en-US/docs/Web/CSS/unset","SUMMARY":"The <code>unset</code> CSS keyword is the combination of the <a href=\"/en-US/docs/Web/CSS/initial\" title=\"The initial CSS keyword applies the initial value of a property to an element. It is allowed on every CSS property and causes the element for which it is specified to use the initial value of the property.\"><code>initial</code></a> and <a href=\"/en-US/docs/Web/CSS/inherit\" title=\"The inherit CSS-value causes the element for which it is specified to take the computed value of the property from its parent element. It is allowed on every CSS property.\"><code>inherit</code></a> keywords. Like these two other CSS-wide keywords, it can be applied to any CSS property, including the CSS shorthand <a href=\"/en-US/docs/Web/CSS/all\" title=\"The CSS all shorthand property resets all properties, but unicode-bidi and direction to their initial or inherited value.\"><code>all</code></a>. This keyword <em>resets</em> the property to its inherited value if it inherits from its parent or to its initial value if not. In other words, it behaves like the <code>inherit</code> keyword in the first case and like the <code>initial</code> keyword in the second case."},"used value":{"URL":"/en-US/docs/Web/CSS/used_value","SUMMARY":"The used value of any CSS property is the final value of that property after all calculations have been performed. For some properties, used values can be retrieved by calling <a href=\"/en-US/docs/DOM/window.getComputedStyle\" style=\"text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;\" title=\"en/DOM/window.getComputedStyle\">window.getComputedStyle</a>. Dimensions (e.g., <code>width</code>, <code>line-height</code>) are all in pixels, shorthand properties (e.g., background) are consistent with their component properties (e.g., <code>background-color</code>, <code>display)</code> and consistent with <code>position</code> and <code>float</code>, and every CSS property has a value."},"user-select":{"URL":"/en-US/docs/Web/CSS/user-select","SUMMARY":"Controls the actual <a href=\"/en-US/docs/DOM/Selection\" title=\"/en-US/docs/DOM/Selection\">Selection</a> operation. This doesn't have any effect on content loaded as chrome, except in textboxes. A similar property 'user-focus' was proposed in <a href=\"http://www.w3.org/TR/2000/WD-css3-userint-20000216\">early drafts of a predecessor of css3-ui</a> but was rejected by the working group."},"var-*":{"URL":"/en-US/docs/Web/CSS/var-*","SUMMARY":"Properties name that are prefixed with <code>var-</code>, like <code>var-example-name</code>, represent <em>custom properties</em> that contains a value than can be reused throughout the document, using a variable (<code>var()</code>)."},"vertical-align":{"URL":"/en-US/docs/Web/CSS/vertical-align","SUMMARY":"The <code>vertical-align</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property specifies the vertical alignment of an inline or table-cell box."},"visibility":{"URL":"/en-US/docs/Web/CSS/visibility","SUMMARY":"The <code>visibility</code> property can be used to hide an element while leaving the space where it would have been. It can also hide rows or columns of a table."},"white-space":{"URL":"/en-US/docs/Web/CSS/white-space","SUMMARY":"The <code>white-space</code> property is used to describe how whitespace inside the element is handled."},"widows":{"URL":"/en-US/docs/Web/CSS/widows","SUMMARY":"The <code>widows</code> <a href=\"/en-US/docs/CSS\" title=\"CSS\">CSS</a> property defines how many minimum lines must be left on top of a new page, on a <code>paged</code> media. In typography, a <em>widow</em> is the last line of a paragraph appearing alone at the top of a page. Setting the <code>widows</code> property allows to prevent widows to be left."},"width":{"URL":"/en-US/docs/Web/CSS/width","SUMMARY":"The <code>width</code> CSS property specifies the width of the content area of an element. The <a href=\"/en-US/docs/CSS/box_model#content\" title=\"CSS/box_model#content\">content area</a> is <em>inside</em> the padding, border, and margin of the element."},"will-change":{"URL":"/en-US/docs/Web/CSS/will-change","SUMMARY":"The <code>will-change</code> <a href=\"/en-US/docs/Web/CSS\">CSS</a> property provides a way for authors to hint browsers about the kind of changes to be expected on an element, so that the browser can setup appropriate optimizations ahead of time before the element is actually changed."},"word-break":{"URL":"/en-US/docs/Web/CSS/word-break","SUMMARY":"The <code>word-break</code> CSS property is used to specify whether to break lines within words."},"word-spacing":{"URL":"/en-US/docs/Web/CSS/word-spacing","SUMMARY":"The <code>word-spacing</code> property specifies spacing behavior between tags and words."},"word-wrap":{"URL":"/en-US/docs/Web/CSS/word-wrap","SUMMARY":"The <code>word-wrap</code> property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box."},"writing-mode":{"URL":"/en-US/docs/Web/CSS/writing-mode","SUMMARY":"The <code>writing-mode</code> property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress."},"z-index":{"URL":"/en-US/docs/Web/CSS/z-index","SUMMARY":"The <code>z-index</code> property specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one."}}